Is this a good way of writing custom tag attributes and rendering code?

I've not done JavaScript in quite a while, but I wanted to make it so that I can circle (in many different ways) around the bounding box of a tagged item.

Is this a good way of doing what I'm wanting?

Is there a better way? E.g. can this be done with only CSS?

Or better style? E.g. can I use better, more understandable idioms?

Did I forget anything? E.g. Am I missing a case where it won't resize the circle correctly?

Please remember that e.g. means 'for the sake of example', which means that I'm only giving an example, and that there might be something else that falls into the category specified that you might think of.

http://jsfiddle.net/adrianh/4SVHH/27/

```
// Creating a tag with the class 'circled' will have that element circled
// using a number of different ways by setting data-style attribute to:
// 'default' - an open ellipse (default)
// 'ellipse' - a closed ellipse
// 'circle' - a closed circle circumscribed around the bounding box.
// 'rect' - a closed rectangle
// 'vbracket' - a square bracket like [ ]
// 'hbracket' - a square bracket that is rotated 90 degrees
//
// Other attributes are:
// data-width - width of lines used to circle element. (default='2')
// data-style - can be: 'solid', 'dotted' or 'dashed'. (default='solid')
// data-color - any html color. (default='red')
//
// Note: The circle is around the bounding box of the tagged object,
// so if the object wraps, it will span the paragraph width.
//
// Note: Circle will be redrawn if window is resized.

(function()
{
// draws an ellipse
function drawEllipse(context, centerX, centerY, width, height)
{
var ratio = height/width;
context.save();
context.scale(1, ratio);
context.beginPath();
context.arc(centerX, centerY/ratio, width/2, 0, 2 * Math.PI);
context.restore();
};

// returns the appropriate array for the style requested
function getLineDash(style)
{
if (style == "s

The data-* attributes are saved in the Element.prototype.dataList property, you can retrieve them like element.dataList['width']. Furthermore, since you use jQuery you can simply use the .data() method of jQuery:

var rect  = obj.getBoundingClientRect();
var type  = val(obj.data("type"), "default");
var width = val(obj.data("width"), 2);
var color = val(obj.data("color"), "red");
var style = val(obj.data("style"), "solid");

And since all functions have the same arguments, I would rather do something like this:

var cycleFunc;

switch (type) {
    case 'default':  cycleFunc = defaultRect;  break;
    case 'rect':     cycleFunc = rectRect;     break;
    case 'ellipse':  cycleFunc = ellipseRect;  break;
    case 'vbracket': cycleFunc = vbracketRect; break;
    case 'hbracket': cycleFunc = hbracketRect; break;
    case 'circle':   cycleFunc = circleRect;   break;
}
cycleFunc(i, rect, width, color, style);

StackExchange Code Review Q#51412, answer score: 3