comt: comparison src/cm/media/js/lib/yui/yui3-3.15.0/build/graphics-canvas/graphics-canvas.js

Mercurial Mercurial > comt / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/cm/media/js/lib/yui/yui3-3.15.0/build/graphics-canvas/graphics-canvas.js

changeset 602

e16a97fb364a

equal deleted inserted replaced

-:d334a616c023
+:e16a97fb364a
+YUI.add('graphics-canvas', function (Y, NAME) {
+var IMPLEMENTATION = "canvas",
+SHAPE = "shape",
+	SPLITPATHPATTERN = /[a-z][^a-z]*/ig,
+SPLITARGSPATTERN = /[\-]?[0-9]*[0-9|\.][0-9]*/g,
+DOCUMENT = Y.config.doc,
+Y_LANG = Y.Lang,
+AttributeLite = Y.AttributeLite,
+	CanvasShape,
+	CanvasPath,
+	CanvasRect,
+CanvasEllipse,
+	CanvasCircle,
+CanvasPieSlice,
+Y_DOM = Y.DOM,
+Y_Color = Y.Color,
+PARSE_INT = parseInt,
+PARSE_FLOAT = parseFloat,
+IS_NUMBER = Y_LANG.isNumber,
+RE = RegExp,
+TORGB = Y_Color.toRGB,
+TOHEX = Y_Color.toHex,
+_getClassName = Y.ClassNameManager.getClassName;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Drawing.html">`Drawing`</a> class.
+* `CanvasDrawing` is not intended to be used directly. Instead, use the <a href="Drawing.html">`Drawing`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Drawing.html">`Drawing`</a>
+* class will point to the `CanvasDrawing` class.
+*
+* @module graphics
+* @class CanvasDrawing
+* @constructor
+*/
+function CanvasDrawing()
+{
+}
+CanvasDrawing.prototype = {
+/**
+* Maps path to methods
+*
+* @property _pathSymbolToMethod
+* @type Object
+* @private
+*/
+_pathSymbolToMethod: {
+M: "moveTo",
+m: "relativeMoveTo",
+L: "lineTo",
+l: "relativeLineTo",
+C: "curveTo",
+c: "relativeCurveTo",
+Q: "quadraticCurveTo",
+q: "relativeQuadraticCurveTo",
+z: "closePath",
+Z: "closePath"
+},
+/**
+* Current x position of the drawing.
+*
+* @property _currentX
+* @type Number
+* @private
+*/
+_currentX: 0,
+/**
+* Current y position of the drqwing.
+*
+* @property _currentY
+* @type Number
+* @private
+*/
+_currentY: 0,
+/**
+* Parses hex color string and alpha value to rgba
+*
+* @method _toRGBA
+* @param {Object} val Color value to parse. Can be hex string, rgb or name.
+* @param {Number} alpha Numeric value between 0 and 1 representing the alpha level.
+* @private
+*/
+_toRGBA: function(val, alpha) {
+alpha = (alpha !== undefined) ? alpha : 1;
+if (!Y_Color.re_RGB.test(val)) {
+val = TOHEX(val);
+}
+if(Y_Color.re_hex.exec(val)) {
+val = 'rgba(' + [
+PARSE_INT(RE.$1, 16),
+PARSE_INT(RE.$2, 16),
+PARSE_INT(RE.$3, 16)
+].join(',') + ',' + alpha + ')';
+}
+return val;
+},
+/**
+* Converts color to rgb format
+*
+* @method _toRGB
+* @param val Color value to convert.
+* @private
+*/
+_toRGB: function(val) {
+return TORGB(val);
+},
+/**
+* Sets the size of the graphics object.
+*
+* @method setSize
+* @param w {Number} width to set for the instance.
+* @param h {Number} height to set for the instance.
+* @private
+*/
+	setSize: function(w, h) {
+if(this.get("autoSize"))
+{
+if(w > this.node.getAttribute("width"))
+{
+this.node.style.width = w + "px";
+this.node.setAttribute("width", w);
+}
+if(h > this.node.getAttribute("height"))
+{
+this.node.style.height = h + "px";
+this.node.setAttribute("height", h);
+}
+}
+},
+	/**
+* Tracks coordinates. Used to calculate the start point of dashed lines.
+*
+* @method _updateCoords
+* @param {Number} x x-coordinate
+* @param {Number} y y-coordinate
+	 * @private
+	 */
+_updateCoords: function(x, y)
+{
+this._xcoords.push(x);
+this._ycoords.push(y);
+this._currentX = x;
+this._currentY = y;
+},
+	/**
+* Clears the coordinate arrays. Called at the end of a drawing operation.
+	 *
+* @method _clearAndUpdateCoords
+* @private
+	 */
+_clearAndUpdateCoords: function()
+{
+var x = this._xcoords.pop() || 0,
+y = this._ycoords.pop() || 0;
+this._updateCoords(x, y);
+},
+	/**
+* Moves the shape's dom node.
+*
+* @method _updateNodePosition
+	 * @private
+	 */
+_updateNodePosition: function()
+{
+var node = this.get("node"),
+x = this.get("x"),
+y = this.get("y");
+node.style.position = "absolute";
+node.style.left = (x + this._left) + "px";
+node.style.top = (y + this._top) + "px";
+},
+/**
+* Queues up a method to be executed when a shape redraws.
+*
+* @method _updateDrawingQueue
+* @param {Array} val An array containing data that can be parsed into a method and arguments. The value at zero-index
+* of the array is a string reference of the drawing method that will be called. All subsequent indices are argument for
+* that method. For example, `lineTo(10, 100)` would be structured as:
+* `["lineTo", 10, 100]`.
+* @private
+*/
+_updateDrawingQueue: function(val)
+{
+this._methods.push(val);
+},
+/**
+* Draws a line segment from the current drawing position to the specified x and y coordinates.
+*
+* @method lineTo
+* @param {Number} point1 x-coordinate for the end point.
+* @param {Number} point2 y-coordinate for the end point.
+* @chainable
+*/
+lineTo: function()
+{
+this._lineTo.apply(this, [Y.Array(arguments), false]);
+return this;
+},
+/**
+* Draws a line segment from the current drawing position to the relative x and y coordinates.
+*
+* @method relativeLineTo
+* @param {Number} point1 x-coordinate for the end point.
+* @param {Number} point2 y-coordinate for the end point.
+* @chainable
+*/
+relativeLineTo: function()
+{
+this._lineTo.apply(this, [Y.Array(arguments), true]);
+return this;
+},
+/**
+* Implements lineTo methods.
+*
+* @method _lineTo
+* @param {Array} args The arguments to be used.
+* @param {Boolean} relative Indicates whether or not to use relative coordinates.
+* @private
+*/
+_lineTo: function(args, relative)
+{
+var point1 = args[0],
+i,
+len,
+x,
+y,
+wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,
+relativeX = relative ? parseFloat(this._currentX) : 0,
+relativeY = relative ? parseFloat(this._currentY) : 0;
+if(!this._lineToMethods)
+{
+this._lineToMethods = [];
+}
+len = args.length - 1;
+if (typeof point1 === 'string' || typeof point1 === 'number') {
+for (i = 0; i < len; i = i + 2) {
+x = parseFloat(args[i]);
+y = parseFloat(args[i + 1]);
+x = x + relativeX;
+y = y + relativeY;
+this._updateDrawingQueue(["lineTo", x, y]);
+this._trackSize(x - wt, y - wt);
+this._trackSize(x + wt, y + wt);
+this._updateCoords(x, y);
+}
+}
+else
+{
+for (i = 0; i < len; i = i + 1)
+{
+x = parseFloat(args[i][0]);
+y = parseFloat(args[i][1]);
+this._updateDrawingQueue(["lineTo", x, y]);
+this._lineToMethods[this._lineToMethods.length] = this._methods[this._methods.length - 1];
+this._trackSize(x - wt, y - wt);
+this._trackSize(x + wt, y + wt);
+this._updateCoords(x, y);
+}
+}
+this._drawingComplete = false;
+return this;
+},
+/**
+* Moves the current drawing position to specified x and y coordinates.
+*
+* @method moveTo
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+moveTo: function()
+{
+this._moveTo.apply(this, [Y.Array(arguments), false]);
+return this;
+},
+/**
+* Moves the current drawing position relative to specified x and y coordinates.
+*
+* @method relativeMoveTo
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+relativeMoveTo: function()
+{
+this._moveTo.apply(this, [Y.Array(arguments), true]);
+return this;
+},
+/**
+* Implements moveTo methods.
+*
+* @method _moveTo
+* @param {Array} args The arguments to be used.
+* @param {Boolean} relative Indicates whether or not to use relative coordinates.
+* @private
+*/
+_moveTo: function(args, relative) {
+var wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,
+relativeX = relative ? parseFloat(this._currentX) : 0,
+relativeY = relative ? parseFloat(this._currentY) : 0,
+x = parseFloat(args[0]) + relativeX,
+y = parseFloat(args[1]) + relativeY;
+this._updateDrawingQueue(["moveTo", x, y]);
+this._trackSize(x - wt, y - wt);
+this._trackSize(x + wt, y + wt);
+this._updateCoords(x, y);
+this._drawingComplete = false;
+return this;
+},
+/**
+* Draws a bezier curve.
+*
+* @method curveTo
+* @param {Number} cp1x x-coordinate for the first control point.
+* @param {Number} cp1y y-coordinate for the first control point.
+* @param {Number} cp2x x-coordinate for the second control point.
+* @param {Number} cp2y y-coordinate for the second control point.
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+curveTo: function() {
+this._curveTo.apply(this, [Y.Array(arguments), false]);
+return this;
+},
+/**
+* Draws a bezier curve relative to the current coordinates.
+*
+* @method relativeCurveTo
+* @param {Number} cp1x x-coordinate for the first control point.
+* @param {Number} cp1y y-coordinate for the first control point.
+* @param {Number} cp2x x-coordinate for the second control point.
+* @param {Number} cp2y y-coordinate for the second control point.
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+relativeCurveTo: function() {
+this._curveTo.apply(this, [Y.Array(arguments), true]);
+return this;
+},
+/**
+* Implements curveTo methods.
+*
+* @method _curveTo
+* @param {Array} args The arguments to be used.
+* @param {Boolean} relative Indicates whether or not to use relative coordinates.
+* @private
+*/
+_curveTo: function(args, relative) {
+var w,
+h,
+cp1x,
+cp1y,
+cp2x,
+cp2y,
+x,
+y,
+pts,
+right,
+left,
+bottom,
+top,
+i,
+len,
+relativeX = relative ? parseFloat(this._currentX) : 0,
+relativeY = relative ? parseFloat(this._currentY) : 0;
+len = args.length - 5;
+for(i = 0; i < len; i = i + 6)
+{
+cp1x = parseFloat(args[i]) + relativeX;
+cp1y = parseFloat(args[i + 1]) + relativeY;
+cp2x = parseFloat(args[i + 2]) + relativeX;
+cp2y = parseFloat(args[i + 3]) + relativeY;
+x = parseFloat(args[i + 4]) + relativeX;
+y = parseFloat(args[i + 5]) + relativeY;
+this._updateDrawingQueue(["bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y]);
+this._drawingComplete = false;
+right = Math.max(x, Math.max(cp1x, cp2x));
+bottom = Math.max(y, Math.max(cp1y, cp2y));
+left = Math.min(x, Math.min(cp1x, cp2x));
+top = Math.min(y, Math.min(cp1y, cp2y));
+w = Math.abs(right - left);
+h = Math.abs(bottom - top);
+pts = [[this._currentX, this._currentY] , [cp1x, cp1y], [cp2x, cp2y], [x, y]];
+this._setCurveBoundingBox(pts, w, h);
+this._currentX = x;
+this._currentY = y;
+}
+},
+/**
+* Draws a quadratic bezier curve.
+*
+* @method quadraticCurveTo
+* @param {Number} cpx x-coordinate for the control point.
+* @param {Number} cpy y-coordinate for the control point.
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+quadraticCurveTo: function() {
+this._quadraticCurveTo.apply(this, [Y.Array(arguments), false]);
+return this;
+},
+/**
+* Draws a quadratic bezier curve relative to the current position.
+*
+* @method relativeQuadraticCurveTo
+* @param {Number} cpx x-coordinate for the control point.
+* @param {Number} cpy y-coordinate for the control point.
+* @param {Number} x x-coordinate for the end point.
+* @param {Number} y y-coordinate for the end point.
+* @chainable
+*/
+relativeQuadraticCurveTo: function() {
+this._quadraticCurveTo.apply(this, [Y.Array(arguments), true]);
+return this;
+},
+/**
+* Implements quadraticCurveTo methods.
+*
+* @method _quadraticCurveTo
+* @param {Array} args The arguments to be used.
+* @param {Boolean} relative Indicates whether or not to use relative coordinates.
+* @private
+*/
+_quadraticCurveTo: function(args, relative) {
+var cpx,
+cpy,
+x,
+y,
+w,
+h,
+pts,
+right,
+left,
+bottom,
+top,
+i,
+len = args.length - 3,
+relativeX = relative ? parseFloat(this._currentX) : 0,
+relativeY = relative ? parseFloat(this._currentY) : 0;
+for(i = 0; i < len; i = i + 4)
+{
+cpx = parseFloat(args[i]) + relativeX;
+cpy = parseFloat(args[i + 1]) + relativeY;
+x = parseFloat(args[i + 2]) + relativeX;
+y = parseFloat(args[i + 3]) + relativeY;
+this._drawingComplete = false;
+right = Math.max(x, cpx);
+bottom = Math.max(y, cpy);
+left = Math.min(x, cpx);
+top = Math.min(y, cpy);
+w = Math.abs(right - left);
+h = Math.abs(bottom - top);
+pts = [[this._currentX, this._currentY] , [cpx, cpy], [x, y]];
+this._setCurveBoundingBox(pts, w, h);
+this._updateDrawingQueue(["quadraticCurveTo", cpx, cpy, x, y]);
+this._updateCoords(x, y);
+}
+return this;
+},
+/**
+* Draws a circle. Used internally by `CanvasCircle` class.
+*
+* @method drawCircle
+* @param {Number} x y-coordinate
+* @param {Number} y x-coordinate
+* @param {Number} r radius
+* @chainable
+* @protected
+*/
+	drawCircle: function(x, y, radius) {
+var startAngle = 0,
+endAngle = 2 * Math.PI,
+wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,
+circum = radius * 2;
+circum += wt;
+this._drawingComplete = false;
+this._trackSize(x + circum, y + circum);
+this._trackSize(x - wt, y - wt);
+this._updateCoords(x, y);
+this._updateDrawingQueue(["arc", x + radius, y + radius, radius, startAngle, endAngle, false]);
+return this;
+},
+/**
+* Draws a diamond.
+*
+* @method drawDiamond
+* @param {Number} x y-coordinate
+* @param {Number} y x-coordinate
+* @param {Number} width width
+* @param {Number} height height
+* @chainable
+* @protected
+*/
+drawDiamond: function(x, y, width, height)
+{
+var midWidth = width * 0.5,
+midHeight = height * 0.5;
+this.moveTo(x + midWidth, y);
+this.lineTo(x + width, y + midHeight);
+this.lineTo(x + midWidth, y + height);
+this.lineTo(x, y + midHeight);
+this.lineTo(x + midWidth, y);
+return this;
+},
+/**
+* Draws an ellipse. Used internally by `CanvasEllipse` class.
+*
+* @method drawEllipse
+* @param {Number} x x-coordinate
+* @param {Number} y y-coordinate
+* @param {Number} w width
+* @param {Number} h height
+* @chainable
+* @protected
+*/
+	drawEllipse: function(x, y, w, h) {
+var l = 8,
+theta = -(45/180) * Math.PI,
+angle = 0,
+angleMid,
+radius = w/2,
+yRadius = h/2,
+i,
+centerX = x + radius,
+centerY = y + yRadius,
+ax, ay, bx, by, cx, cy,
+wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0;
+ax = centerX + Math.cos(0) * radius;
+ay = centerY + Math.sin(0) * yRadius;
+this.moveTo(ax, ay);
+for(i = 0; i < l; i++)
+{
+angle += theta;
+angleMid = angle - (theta / 2);
+bx = centerX + Math.cos(angle) * radius;
+by = centerY + Math.sin(angle) * yRadius;
+cx = centerX + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
+cy = centerY + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
+this._updateDrawingQueue(["quadraticCurveTo", cx, cy, bx, by]);
+}
+this._trackSize(x + w + wt, y + h + wt);
+this._trackSize(x - wt, y - wt);
+this._updateCoords(x, y);
+return this;
+},
+/**
+* Draws a rectangle.
+*
+* @method drawRect
+* @param {Number} x x-coordinate
+* @param {Number} y y-coordinate
+* @param {Number} w width
+* @param {Number} h height
+* @chainable
+*/
+drawRect: function(x, y, w, h) {
+this._drawingComplete = false;
+this.moveTo(x, y);
+this.lineTo(x + w, y);
+this.lineTo(x + w, y + h);
+this.lineTo(x, y + h);
+this.lineTo(x, y);
+return this;
+},
+/**
+* Draws a rectangle with rounded corners.
+*
+* @method drawRect
+* @param {Number} x x-coordinate
+* @param {Number} y y-coordinate
+* @param {Number} w width
+* @param {Number} h height
+* @param {Number} ew width of the ellipse used to draw the rounded corners
+* @param {Number} eh height of the ellipse used to draw the rounded corners
+* @chainable
+*/
+drawRoundRect: function(x, y, w, h, ew, eh) {
+this._drawingComplete = false;
+this.moveTo( x, y + eh);
+this.lineTo(x, y + h - eh);
+this.quadraticCurveTo(x, y + h, x + ew, y + h);
+this.lineTo(x + w - ew, y + h);
+this.quadraticCurveTo(x + w, y + h, x + w, y + h - eh);
+this.lineTo(x + w, y + eh);
+this.quadraticCurveTo(x + w, y, x + w - ew, y);
+this.lineTo(x + ew, y);
+this.quadraticCurveTo(x, y, x, y + eh);
+return this;
+},
+/**
+* Draws a wedge.
+*
+* @method drawWedge
+* @param {Number} x x-coordinate of the wedge's center point
+* @param {Number} y y-coordinate of the wedge's center point
+* @param {Number} startAngle starting angle in degrees
+* @param {Number} arc sweep of the wedge. Negative values draw clockwise.
+* @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
+* @param {Number} yRadius [optional] y radius for wedge.
+* @chainable
+* @private
+*/
+drawWedge: function(x, y, startAngle, arc, radius, yRadius)
+{
+var wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,
+segs,
+segAngle,
+theta,
+angle,
+angleMid,
+ax,
+ay,
+bx,
+by,
+cx,
+cy,
+i = 0;
+yRadius = yRadius || radius;
+this._drawingComplete = false;
+// move to x,y position
+this._updateDrawingQueue(["moveTo", x, y]);
+yRadius = yRadius || radius;
+// limit sweep to reasonable numbers
+if(Math.abs(arc) > 360)
+{
+arc = 360;
+}
+// First we calculate how many segments are needed
+// for a smooth arc.
+segs = Math.ceil(Math.abs(arc) / 45);
+// Now calculate the sweep of each segment.
+segAngle = arc / segs;
+// The math requires radians rather than degrees. To convert from degrees
+// use the formula (degrees/180)*Math.PI to get radians.
+theta = -(segAngle / 180) * Math.PI;
+// convert angle startAngle to radians
+angle = (startAngle / 180) * Math.PI;
+// draw the curve in segments no larger than 45 degrees.
+if(segs > 0)
+{
+// draw a line from the center to the start of the curve
+ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
+ay = y + Math.sin(startAngle / 180 * Math.PI) * yRadius;
+this.lineTo(ax, ay);
+// Loop for drawing curve segments
+for(i = 0; i < segs; ++i)
+{
+angle += theta;
+angleMid = angle - (theta / 2);
+bx = x + Math.cos(angle) * radius;
+by = y + Math.sin(angle) * yRadius;
+cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
+cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
+this._updateDrawingQueue(["quadraticCurveTo", cx, cy, bx, by]);
+}
+// close the wedge by drawing a line to the center
+this._updateDrawingQueue(["lineTo", x, y]);
+}
+this._trackSize(-wt , -wt);
+this._trackSize((radius * 2) + wt, (radius * 2) + wt);
+return this;
+},
+/**
+* Completes a drawing operation.
+*
+* @method end
+* @chainable
+*/
+end: function() {
+this._closePath();
+return this;
+},
+/**
+* Ends a fill and stroke
+*
+* @method closePath
+* @chainable
+*/
+closePath: function()
+{
+this._updateDrawingQueue(["closePath"]);
+this._updateDrawingQueue(["beginPath"]);
+return this;
+},
+	/**
+	 * Clears the graphics object.
+	 *
+	 * @method clear
+* @chainable
+	 */
+clear: function() {
+		this._initProps();
+if(this.node)
+{
+this._context.clearRect(0, 0, this.node.width, this.node.height);
+}
+return this;
+	},
+/**
+* Returns a linear gradient fill
+*
+* @method _getLinearGradient
+* @return CanvasGradient
+* @private
+*/
+_getLinearGradient: function() {
+var isNumber = Y.Lang.isNumber,
+fill = this.get("fill"),
+stops = fill.stops,
+opacity,
+color,
+stop,
+i,
+len = stops.length,
+gradient,
+x = 0,
+y = 0,
+w = this.get("width"),
+h = this.get("height"),
+r = fill.rotation || 0,
+x1, x2, y1, y2,
+cx = x + w/2,
+cy = y + h/2,
+offset,
+radCon = Math.PI/180,
+tanRadians = parseFloat(parseFloat(Math.tan(r * radCon)).toFixed(8));
+if(Math.abs(tanRadians) * w/2 >= h/2)
+{
+if(r < 180)
+{
+y1 = y;
+y2 = y + h;
+}
+else
+{
+y1 = y + h;
+y2 = y;
+}
+x1 = cx - ((cy - y1)/tanRadians);
+x2 = cx - ((cy - y2)/tanRadians);
+}
+else
+{
+if(r > 90 && r < 270)
+{
+x1 = x + w;
+x2 = x;
+}
+else
+{
+x1 = x;
+x2 = x + w;
+}
+y1 = ((tanRadians * (cx - x1)) - cy) * -1;
+y2 = ((tanRadians * (cx - x2)) - cy) * -1;
+}
+gradient = this._context.createLinearGradient(x1, y1, x2, y2);
+for(i = 0; i < len; ++i)
+{
+stop = stops[i];
+opacity = stop.opacity;
+color = stop.color;
+offset = stop.offset;
+if(isNumber(opacity))
+{
+opacity = Math.max(0, Math.min(1, opacity));
+color = this._toRGBA(color, opacity);
+}
+else
+{
+color = TORGB(color);
+}
+offset = stop.offset || i/(len - 1);
+gradient.addColorStop(offset, color);
+}
+return gradient;
+},
+/**
+* Returns a radial gradient fill
+*
+* @method _getRadialGradient
+* @return CanvasGradient
+* @private
+*/
+_getRadialGradient: function() {
+var isNumber = Y.Lang.isNumber,
+fill = this.get("fill"),
+r = fill.r,
+fx = fill.fx,
+fy = fill.fy,
+stops = fill.stops,
+opacity,
+color,
+stop,
+i,
+len = stops.length,
+gradient,
+x = 0,
+y = 0,
+w = this.get("width"),
+h = this.get("height"),
+x1, x2, y1, y2, r2,
+xc, yc, xn, yn, d,
+offset,
+ratio,
+stopMultiplier;
+xc = x + w/2;
+yc = y + h/2;
+x1 = w * fx;
+y1 = h * fy;
+x2 = x + w/2;
+y2 = y + h/2;
+r2 = w * r;
+d = Math.sqrt( Math.pow(Math.abs(xc - x1), 2) + Math.pow(Math.abs(yc - y1), 2) );
+if(d >= r2)
+{
+ratio = d/r2;
+//hack. gradient won't show if it is exactly on the edge of the arc
+if(ratio === 1)
+{
+ratio = 1.01;
+}
+xn = (x1 - xc)/ratio;
+yn = (y1 - yc)/ratio;
+xn = xn > 0 ? Math.floor(xn) : Math.ceil(xn);
+yn = yn > 0 ? Math.floor(yn) : Math.ceil(yn);
+x1 = xc + xn;
+y1 = yc + yn;
+}
+//If the gradient radius is greater than the circle's, adjusting the radius stretches the gradient properly.
+//If the gradient radius is less than the circle's, adjusting the radius of the gradient will not work.
+//Instead, adjust the color stops to reflect the smaller radius.
+if(r >= 0.5)
+{
+gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, r * w);
+stopMultiplier = 1;
+}
+else
+{
+gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, w/2);
+stopMultiplier = r * 2;
+}
+for(i = 0; i < len; ++i)
+{
+stop = stops[i];
+opacity = stop.opacity;
+color = stop.color;
+offset = stop.offset;
+if(isNumber(opacity))
+{
+opacity = Math.max(0, Math.min(1, opacity));
+color = this._toRGBA(color, opacity);
+}
+else
+{
+color = TORGB(color);
+}
+offset = stop.offset || i/(len - 1);
+offset *= stopMultiplier;
+if(offset <= 1)
+{
+gradient.addColorStop(offset, color);
+}
+}
+return gradient;
+},
+/**
+* Clears all values
+*
+* @method _initProps
+* @private
+*/
+_initProps: function() {
+this._methods = [];
+this._lineToMethods = [];
+this._xcoords = [0];
+		this._ycoords = [0];
+		this._width = 0;
+this._height = 0;
+this._left = 0;
+this._top = 0;
+this._right = 0;
+this._bottom = 0;
+this._currentX = 0;
+this._currentY = 0;
+},
+/**
+* Indicates a drawing has completed.
+*
+* @property _drawingComplete
+* @type Boolean
+* @private
+*/
+_drawingComplete: false,
+/**
+* Creates canvas element
+*
+* @method _createGraphic
+* @return HTMLCanvasElement
+* @private
+*/
+_createGraphic: function() {
+var graphic = Y.config.doc.createElement('canvas');
+return graphic;
+},
+/**
+* Returns the points on a curve
+*
+* @method getBezierData
+* @param Array points Array containing the begin, end and control points of a curve.
+* @param Number t The value for incrementing the next set of points.
+* @return Array
+* @private
+*/
+getBezierData: function(points, t) {
+var n = points.length,
+tmp = [],
+i,
+j;
+for (i = 0; i < n; ++i){
+tmp[i] = [points[i][0], points[i][1]]; // save input
+}
+for (j = 1; j < n; ++j) {
+for (i = 0; i < n - j; ++i) {
+tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
+tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
+}
+}
+return [ tmp[0][0], tmp[0][1] ];
+},
+/**
+* Calculates the bounding box for a curve
+*
+* @method _setCurveBoundingBox
+* @param Array pts Array containing points for start, end and control points of a curve.
+* @param Number w Width used to calculate the number of points to describe the curve.
+* @param Number h Height used to calculate the number of points to describe the curve.
+* @private
+*/
+_setCurveBoundingBox: function(pts, w, h)
+{
+var i = 0,
+left = this._currentX,
+right = left,
+top = this._currentY,
+bottom = top,
+len = Math.round(Math.sqrt((w * w) + (h * h))),
+t = 1/len,
+wt = this._stroke && this._strokeWeight ? this._strokeWeight : 0,
+xy;
+for(i = 0; i < len; ++i)
+{
+xy = this.getBezierData(pts, t * i);
+left = isNaN(left) ? xy[0] : Math.min(xy[0], left);
+right = isNaN(right) ? xy[0] : Math.max(xy[0], right);
+top = isNaN(top) ? xy[1] : Math.min(xy[1], top);
+bottom = isNaN(bottom) ? xy[1] : Math.max(xy[1], bottom);
+}
+left = Math.round(left * 10)/10;
+right = Math.round(right * 10)/10;
+top = Math.round(top * 10)/10;
+bottom = Math.round(bottom * 10)/10;
+this._trackSize(right + wt, bottom + wt);
+this._trackSize(left - wt, top - wt);
+},
+/**
+* Updates the size of the graphics object
+*
+* @method _trackSize
+* @param {Number} w width
+* @param {Number} h height
+* @private
+*/
+_trackSize: function(w, h) {
+if (w > this._right) {
+this._right = w;
+}
+if(w < this._left)
+{
+this._left = w;
+}
+if (h < this._top)
+{
+this._top = h;
+}
+if (h > this._bottom)
+{
+this._bottom = h;
+}
+this._width = this._right - this._left;
+this._height = this._bottom - this._top;
+}
+};
+Y.CanvasDrawing = CanvasDrawing;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Shape.html">`Shape`</a> class.
+* `CanvasShape` is not intended to be used directly. Instead, use the <a href="Shape.html">`Shape`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Shape.html">`Shape`</a>
+* class will point to the `CanvasShape` class.
+*
+* @module graphics
+* @class CanvasShape
+* @constructor
+*/
+CanvasShape = function()
+{
+this._transforms = [];
+this.matrix = new Y.Matrix();
+CanvasShape.superclass.constructor.apply(this, arguments);
+};
+CanvasShape.NAME = "shape";
+Y.extend(CanvasShape, Y.GraphicBase, Y.mix({
+/**
+* Init method, invoked during construction.
+* Calls `initializer` method.
+*
+* @method init
+* @protected
+*/
+init: function()
+	{
+		this.initializer.apply(this, arguments);
+	},
+	/**
+	 * Initializes the shape
+	 *
+	 * @private
+	 * @method _initialize
+	 */
+	initializer: function(cfg)
+	{
+		var host = this,
+graphic = cfg.graphic,
+data = this.get("data");
+host._initProps();
+		host.createNode();
+		host._xcoords = [0];
+		host._ycoords = [0];
+if(graphic)
+{
+this._setGraphic(graphic);
+}
+if(data)
+{
+host._parsePathData(data);
+}
+		host._updateHandler();
+	},
+/**
+* Set the Graphic instance for the shape.
+*
+* @method _setGraphic
+* @param {Graphic | Node | HTMLElement | String} render This param is used to determine the graphic instance. If it is a
+* `Graphic` instance, it will be assigned to the `graphic` attribute. Otherwise, a new Graphic instance will be created
+* and rendered into the dom element that the render represents.
+* @private
+*/
+_setGraphic: function(render)
+{
+var graphic;
+if(render instanceof Y.CanvasGraphic)
+{
+this._graphic = render;
+}
+else
+{
+graphic = new Y.CanvasGraphic({
+render: render
+});
+graphic._appendShape(this);
+this._graphic = graphic;
+}
+},
+	/**
+	 * Add a class name to each node.
+	 *
+	 * @method addClass
+	 * @param {String} className the class name to add to the node's class attribute
+	 */
+	addClass: function(className)
+	{
+		var node = this.get("node");
+		Y.DOM.addClass(node, className);
+	},
+	/**
+	 * Removes a class name from each node.
+	 *
+	 * @method removeClass
+	 * @param {String} className the class name to remove from the node's class attribute
+	 */
+	removeClass: function(className)
+	{
+		var node = this.get("node");
+		Y.DOM.removeClass(node, className);
+	},
+	/**
+	 * Gets the current position of the node in page coordinates.
+	 *
+	 * @method getXY
+	 * @return Array The XY position of the shape.
+	 */
+	getXY: function()
+	{
+		var graphic = this.get("graphic"),
+			parentXY = graphic.getXY(),
+			x = this.get("x"),
+			y = this.get("y");
+		return [parentXY[0] + x, parentXY[1] + y];
+	},
+	/**
+	 * Set the position of the shape in page coordinates, regardless of how the node is positioned.
+	 *
+	 * @method setXY
+	 * @param {Array} Contains X & Y values for new position (coordinates are page-based)
+	 */
+	setXY: function(xy)
+	{
+		var graphic = this.get("graphic"),
+			parentXY = graphic.getXY(),
+			x = xy[0] - parentXY[0],
+			y = xy[1] - parentXY[1];
+		this._set("x", x);
+		this._set("y", y);
+		this._updateNodePosition(x, y);
+	},
+	/**
+	 * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
+	 *
+	 * @method contains
+	 * @param {CanvasShape | HTMLElement} needle The possible node or descendent
+	 * @return Boolean Whether or not this shape is the needle or its ancestor.
+	 */
+	contains: function(needle)
+	{
+		var node = needle instanceof Y.Node ? needle._node : needle;
+return node === this.node;
+	},
+	/**
+	 * Test if the supplied node matches the supplied selector.
+	 *
+	 * @method test
+	 * @param {String} selector The CSS selector to test against.
+	 * @return Boolean Wheter or not the shape matches the selector.
+	 */
+	test: function(selector)
+	{
+		return Y.Selector.test(this.node, selector);
+	},
+	/**
+	 * Compares nodes to determine if they match.
+	 * Node instances can be compared to each other and/or HTMLElements.
+	 * @method compareTo
+	 * @param {HTMLElement | Node} refNode The reference node to compare to the node.
+	 * @return {Boolean} True if the nodes match, false if they do not.
+	 */
+	compareTo: function(refNode) {
+		var node = this.node;
+		return node === refNode;
+	},
+	/**
+	 * Value function for fill attribute
+	 *
+	 * @method _getDefaultFill
+	 * @return Object
+	 * @private
+	 */
+	_getDefaultFill: function() {
+		return {
+			type: "solid",
+			opacity: 1,
+			cx: 0.5,
+			cy: 0.5,
+			fx: 0.5,
+			fy: 0.5,
+			r: 0.5
+		};
+	},
+	/**
+	 * Value function for stroke attribute
+	 *
+	 * @method _getDefaultStroke
+	 * @return Object
+	 * @private
+	 */
+	_getDefaultStroke: function()
+	{
+		return {
+			weight: 1,
+			dashstyle: "none",
+			color: "#000",
+			opacity: 1.0
+		};
+	},
+	/**
+	 * Left edge of the path
+	 *
+* @property _left
+* @type Number
+	 * @private
+	 */
+	_left: 0,
+	/**
+	 * Right edge of the path
+	 *
+* @property _right
+* @type Number
+	 * @private
+	 */
+	_right: 0,
+	/**
+	 * Top edge of the path
+	 *
+* @property _top
+* @type Number
+	 * @private
+	 */
+	_top: 0,
+	/**
+	 * Bottom edge of the path
+	 *
+* @property _bottom
+* @type Number
+	 * @private
+	 */
+	_bottom: 0,
+	/**
+	 * Creates the dom node for the shape.
+	 *
+* @method createNode
+	 * @return HTMLElement
+	 * @private
+	 */
+	createNode: function()
+	{
+		var host = this,
+node = Y.config.doc.createElement('canvas'),
+			id = host.get("id"),
+concat = host._camelCaseConcat,
+name = host.name;
+		host._context = node.getContext('2d');
+		node.setAttribute("overflow", "visible");
+node.style.overflow = "visible";
+if(!host.get("visible"))
+{
+node.style.visibility = "hidden";
+}
+		node.setAttribute("id", id);
+		id = "#" + id;
+host.node = node;
+		host.addClass(
+_getClassName(SHAPE) +
+" " +
+_getClassName(concat(IMPLEMENTATION, SHAPE)) +
+" " +
+_getClassName(name) +
+" " +
+_getClassName(concat(IMPLEMENTATION, name))
+);
+	},
+	/**
+* Overrides default `on` method. Checks to see if its a dom interaction event. If so,
+* return an event attached to the `node` element. If not, return the normal functionality.
+*
+* @method on
+* @param {String} type event type
+* @param {Object} callback function
+	 * @private
+	 */
+	on: function(type, fn)
+	{
+		if(Y.Node.DOM_EVENTS[type])
+		{
+return Y.on(type, fn, "#" + this.get("id"));
+		}
+		return Y.on.apply(this, arguments);
+	},
+	/**
+	 * Adds a stroke to the shape node.
+	 *
+	 * @method _strokeChangeHandler
+* @param {Object} stroke Properties of the `stroke` attribute.
+	 * @private
+	 */
+	_setStrokeProps: function(stroke)
+	{
+		var color,
+			weight,
+			opacity,
+			linejoin,
+			linecap,
+			dashstyle;
+if(stroke)
+{
+color = stroke.color;
+weight = PARSE_FLOAT(stroke.weight);
+opacity = PARSE_FLOAT(stroke.opacity);
+linejoin = stroke.linejoin || "round";
+linecap = stroke.linecap || "butt";
+dashstyle = stroke.dashstyle;
+this._miterlimit = null;
+this._dashstyle = (dashstyle && Y.Lang.isArray(dashstyle) && dashstyle.length > 1) ? dashstyle : null;
+this._strokeWeight = weight;
+if (IS_NUMBER(weight) && weight > 0)
+{
+this._stroke = 1;
+}
+else
+{
+this._stroke = 0;
+}
+if (IS_NUMBER(opacity)) {
+this._strokeStyle = this._toRGBA(color, opacity);
+}
+else
+{
+this._strokeStyle = color;
+}
+this._linecap = linecap;
+if(linejoin === "round" || linejoin === "bevel")
+{
+this._linejoin = linejoin;
+}
+else
+{
+linejoin = parseInt(linejoin, 10);
+if(IS_NUMBER(linejoin))
+{
+this._miterlimit =  Math.max(linejoin, 1);
+this._linejoin = "miter";
+}
+}
+}
+else
+{
+this._stroke = 0;
+}
+	},
+/**
+* Sets the value of an attribute.
+*
+* @method set
+* @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can
+* be passed in to set multiple attributes at once.
+* @param {Any} value The value to set the attribute to. This value is ignored if an object is received as
+* the name param.
+*/
+	set: function()
+	{
+		var host = this;
+		AttributeLite.prototype.set.apply(host, arguments);
+		if(host.initialized)
+		{
+			host._updateHandler();
+		}
+	},
+	/**
+	 * Adds a fill to the shape node.
+	 *
+	 * @method _setFillProps
+* @param {Object} fill Properties of the `fill` attribute.
+	 * @private
+	 */
+	_setFillProps: function(fill)
+	{
+		var isNumber = IS_NUMBER,
+			color,
+			opacity,
+			type;
+if(fill)
+{
+color = fill.color;
+type = fill.type;
+if(type === "linear" || type === "radial")
+{
+this._fillType = type;
+}
+else if(color)
+{
+opacity = fill.opacity;
+if (isNumber(opacity))
+{
+opacity = Math.max(0, Math.min(1, opacity));
+color = this._toRGBA(color, opacity);
+}
+else
+{
+color = TORGB(color);
+}
+this._fillColor = color;
+this._fillType = 'solid';
+}
+else
+{
+this._fillColor = null;
+}
+}
+		else
+		{
+this._fillType = null;
+			this._fillColor = null;
+		}
+	},
+	/**
+	 * Specifies a 2d translation.
+	 *
+	 * @method translate
+	 * @param {Number} x The value to transate on the x-axis.
+	 * @param {Number} y The value to translate on the y-axis.
+	 */
+	translate: function(x, y)
+	{
+		this._translateX += x;
+		this._translateY += y;
+		this._addTransform("translate", arguments);
+	},
+	/**
+	 * Translates the shape along the x-axis. When translating x and y coordinates,
+	 * use the `translate` method.
+	 *
+	 * @method translateX
+	 * @param {Number} x The value to translate.
+	 */
+	translateX: function(x)
+{
+this._translateX += x;
+this._addTransform("translateX", arguments);
+},
+	/**
+	 * Performs a translate on the y-coordinate. When translating x and y coordinates,
+	 * use the `translate` method.
+	 *
+	 * @method translateY
+	 * @param {Number} y The value to translate.
+	 */
+	translateY: function(y)
+{
+this._translateY += y;
+this._addTransform("translateY", arguments);
+},
+/**
+* Skews the shape around the x-axis and y-axis.
+*
+* @method skew
+* @param {Number} x The value to skew on the x-axis.
+* @param {Number} y The value to skew on the y-axis.
+*/
+skew: function()
+{
+this._addTransform("skew", arguments);
+},
+	/**
+	 * Skews the shape around the x-axis.
+	 *
+	 * @method skewX
+	 * @param {Number} x x-coordinate
+	 */
+skewX: function()
+{
+this._addTransform("skewX", arguments);
+},
+	/**
+	 * Skews the shape around the y-axis.
+	 *
+	 * @method skewY
+	 * @param {Number} y y-coordinate
+	 */
+skewY: function()
+{
+this._addTransform("skewY", arguments);
+},
+	/**
+	 * Rotates the shape clockwise around it transformOrigin.
+	 *
+	 * @method rotate
+	 * @param {Number} deg The degree of the rotation.
+	 */
+rotate: function()
+{
+this._addTransform("rotate", arguments);
+},
+	/**
+	 * Specifies a 2d scaling operation.
+	 *
+	 * @method scale
+	 * @param {Number} val
+	 */
+scale: function()
+{
+this._addTransform("scale", arguments);
+},
+/**
+* Storage for the transform attribute.
+*
+* @property _transform
+* @type String
+* @private
+*/
+_transform: "",
+/**
+* Adds a transform to the shape.
+*
+* @method _addTransform
+* @param {String} type The transform being applied.
+* @param {Array} args The arguments for the transform.
+	 * @private
+	 */
+	_addTransform: function(type, args)
+	{
+args = Y.Array(args);
+this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")");
+args.unshift(type);
+this._transforms.push(args);
+if(this.initialized)
+{
+this._updateTransform();
+}
+	},
+	/**
+* Applies all transforms.
+*
+* @method _updateTransform
+	 * @private
+	 */
+	_updateTransform: function()
+	{
+		var node = this.node,
+			key,
+			transform,
+			transformOrigin = this.get("transformOrigin"),
+matrix = this.matrix,
+i,
+len = this._transforms.length;
+if(this._transforms && this._transforms.length > 0)
+{
+for(i = 0; i < len; ++i)
+{
+key = this._transforms[i].shift();
+if(key)
+{
+matrix[key].apply(matrix, this._transforms[i]);
+}
+}
+transform = matrix.toCSSText();
+}
+this._graphic.addToRedrawQueue(this);
+		transformOrigin = (100 * transformOrigin[0]) + "% " + (100 * transformOrigin[1]) + "%";
+Y_DOM.setStyle(node, "transformOrigin", transformOrigin);
+if(transform)
+		{
+Y_DOM.setStyle(node, "transform", transform);
+		}
+this._transforms = [];
+	},
+	/**
+* Updates `Shape` based on attribute changes.
+*
+* @method _updateHandler
+	 * @private
+	 */
+	_updateHandler: function()
+	{
+		this._draw();
+		this._updateTransform();
+	},
+	/**
+	 * Updates the shape.
+	 *
+	 * @method _draw
+	 * @private
+	 */
+	_draw: function()
+	{
+var node = this.node;
+this.clear();
+		this._closePath();
+		node.style.left = this.get("x") + "px";
+		node.style.top = this.get("y") + "px";
+	},
+	/**
+	 * Completes a shape or drawing
+	 *
+	 * @method _closePath
+	 * @private
+	 */
+	_closePath: function()
+	{
+		if(!this._methods)
+		{
+			return;
+		}
+		var node = this.get("node"),
+			w = this._right - this._left,
+			h = this._bottom - this._top,
+			context = this._context,
+			methods = [],
+			cachedMethods = this._methods.concat(),
+			i,
+			j,
+			method,
+			args,
+argsLen,
+			len = 0;
+		this._context.clearRect(0, 0, node.width, node.height);
+if(this._methods)
+{
+			len = cachedMethods.length;
+			if(!len || len < 1)
+			{
+				return;
+			}
+			for(i = 0; i < len; ++i)
+			{
+				methods[i] = cachedMethods[i].concat();
+				args = methods[i];
+argsLen = (args[0] === "quadraticCurveTo" || args[0] === "bezierCurveTo") ? args.length : 3;
+				for(j = 1; j < argsLen; ++j)
+				{
+					if(j % 2 === 0)
+					{
+						args[j] = args[j] - this._top;
+					}
+					else
+					{
+						args[j] = args[j] - this._left;
+					}
+				}
+			}
+node.setAttribute("width", Math.min(w, 2000));
+node.setAttribute("height", Math.min(2000, h));
+context.beginPath();
+			for(i = 0; i < len; ++i)
+			{
+				args = methods[i].concat();
+				if(args && args.length > 0)
+				{
+					method = args.shift();
+					if(method)
+					{
+if(method === "closePath")
+{
+context.closePath();
+this._strokeAndFill(context);
+}
+						else if(method && method === "lineTo" && this._dashstyle)
+						{
+							args.unshift(this._xcoords[i] - this._left, this._ycoords[i] - this._top);
+							this._drawDashedLine.apply(this, args);
+						}
+						else
+						{
+context[method].apply(context, args);
+						}
+					}
+				}
+			}
+this._strokeAndFill(context);
+			this._drawingComplete = true;
+			this._clearAndUpdateCoords();
+			this._updateNodePosition();
+			this._methods = cachedMethods;
+		}
+	},
+/**
+* Completes a stroke and/or fill operation on the context.
+*
+* @method _strokeAndFill
+* @param {Context} Reference to the context element of the canvas instance.
+* @private
+*/
+_strokeAndFill: function(context)
+{
+if (this._fillType)
+{
+if(this._fillType === "linear")
+{
+context.fillStyle = this._getLinearGradient();
+}
+else if(this._fillType === "radial")
+{
+context.fillStyle = this._getRadialGradient();
+}
+else
+{
+context.fillStyle = this._fillColor;
+}
+context.closePath();
+context.fill();
+}
+if (this._stroke) {
+if(this._strokeWeight)
+{
+context.lineWidth = this._strokeWeight;
+}
+context.lineCap = this._linecap;
+context.lineJoin = this._linejoin;
+if(this._miterlimit)
+{
+context.miterLimit = this._miterlimit;
+}
+context.strokeStyle = this._strokeStyle;
+context.stroke();
+}
+},
+	/**
+	 * Draws a dashed line between two points.
+	 *
+	 * @method _drawDashedLine
+	 * @param {Number} xStart	The x position of the start of the line
+	 * @param {Number} yStart	The y position of the start of the line
+	 * @param {Number} xEnd		The x position of the end of the line
+	 * @param {Number} yEnd		The y position of the end of the line
+	 * @private
+	 */
+	_drawDashedLine: function(xStart, yStart, xEnd, yEnd)
+	{
+		var context = this._context,
+			dashsize = this._dashstyle[0],
+			gapsize = this._dashstyle[1],
+			segmentLength = dashsize + gapsize,
+			xDelta = xEnd - xStart,
+			yDelta = yEnd - yStart,
+			delta = Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2)),
+			segmentCount = Math.floor(Math.abs(delta / segmentLength)),
+			radians = Math.atan2(yDelta, xDelta),
+			xCurrent = xStart,
+			yCurrent = yStart,
+			i;
+		xDelta = Math.cos(radians) * segmentLength;
+		yDelta = Math.sin(radians) * segmentLength;
+		for(i = 0; i < segmentCount; ++i)
+		{
+			context.moveTo(xCurrent, yCurrent);
+			context.lineTo(xCurrent + Math.cos(radians) * dashsize, yCurrent + Math.sin(radians) * dashsize);
+			xCurrent += xDelta;
+			yCurrent += yDelta;
+		}
+		context.moveTo(xCurrent, yCurrent);
+		delta = Math.sqrt((xEnd - xCurrent) * (xEnd - xCurrent) + (yEnd - yCurrent) * (yEnd - yCurrent));
+		if(delta > dashsize)
+		{
+			context.lineTo(xCurrent + Math.cos(radians) * dashsize, yCurrent + Math.sin(radians) * dashsize);
+		}
+		else if(delta > 0)
+		{
+			context.lineTo(xCurrent + Math.cos(radians) * delta, yCurrent + Math.sin(radians) * delta);
+		}
+		context.moveTo(xEnd, yEnd);
+	},
+	/**
+	 * Returns the bounds for a shape.
+	 *
+* Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.
+* The calculated bounding box is used by the graphic instance to calculate its viewBox.
+*
+	 * @method getBounds
+	 * @return Object
+	 */
+	getBounds: function()
+	{
+		var type = this._type,
+			w = this.get("width"),
+			h = this.get("height"),
+			x = this.get("x"),
+			y = this.get("y");
+if(type === "path")
+{
+x = x + this._left;
+y = y + this._top;
+w = this._right - this._left;
+h = this._bottom - this._top;
+}
+return this._getContentRect(w, h, x, y);
+	},
+/**
+* Calculates the bounding box for the shape.
+*
+* @method _getContentRect
+* @param {Number} w width of the shape
+* @param {Number} h height of the shape
+* @param {Number} x x-coordinate of the shape
+* @param {Number} y y-coordinate of the shape
+* @private
+*/
+_getContentRect: function(w, h, x, y)
+{
+var transformOrigin = this.get("transformOrigin"),
+transformX = transformOrigin[0] * w,
+transformY = transformOrigin[1] * h,
+transforms = this.matrix.getTransformArray(this.get("transform")),
+matrix = new Y.Matrix(),
+i,
+len = transforms.length,
+transform,
+key,
+contentRect;
+if(this._type === "path")
+{
+transformX = transformX + x;
+transformY = transformY + y;
+}
+transformX = !isNaN(transformX) ? transformX : 0;
+transformY = !isNaN(transformY) ? transformY : 0;
+matrix.translate(transformX, transformY);
+for(i = 0; i < len; i = i + 1)
+{
+transform = transforms[i];
+key = transform.shift();
+if(key)
+{
+matrix[key].apply(matrix, transform);
+}
+}
+matrix.translate(-transformX, -transformY);
+contentRect = matrix.getContentRect(w, h, x, y);
+return contentRect;
+},
+/**
+* Places the shape above all other shapes.
+*
+* @method toFront
+*/
+toFront: function()
+{
+var graphic = this.get("graphic");
+if(graphic)
+{
+graphic._toFront(this);
+}
+},
+/**
+* Places the shape underneath all other shapes.
+*
+* @method toFront
+*/
+toBack: function()
+{
+var graphic = this.get("graphic");
+if(graphic)
+{
+graphic._toBack(this);
+}
+},
+/**
+* Parses path data string and call mapped methods.
+*
+* @method _parsePathData
+* @param {String} val The path data
+* @private
+*/
+_parsePathData: function(val)
+{
+var method,
+methodSymbol,
+args,
+commandArray = Y.Lang.trim(val.match(SPLITPATHPATTERN)),
+i,
+len,
+str,
+symbolToMethod = this._pathSymbolToMethod;
+if(commandArray)
+{
+this.clear();
+len = commandArray.length || 0;
+for(i = 0; i < len; i = i + 1)
+{
+str = commandArray[i];
+methodSymbol = str.substr(0, 1);
+args = str.substr(1).match(SPLITARGSPATTERN);
+method = symbolToMethod[methodSymbol];
+if(method)
+{
+if(args)
+{
+this[method].apply(this, args);
+}
+else
+{
+this[method].apply(this);
+}
+}
+}
+this.end();
+}
+},
+/**
+* Destroys the shape instance.
+*
+* @method destroy
+*/
+destroy: function()
+{
+var graphic = this.get("graphic");
+if(graphic)
+{
+graphic.removeShape(this);
+}
+else
+{
+this._destroy();
+}
+},
+/**
+*  Implementation for shape destruction
+*
+*  @method destroy
+*  @protected
+*/
+_destroy: function()
+{
+if(this.node)
+{
+Y.Event.purgeElement(this.node, true);
+if(this.node.parentNode)
+{
+this.node.style.visibility = "";
+this.node.parentNode.removeChild(this.node);
+}
+this._context = null;
+this.node = null;
+}
+}
+}, Y.CanvasDrawing.prototype));
+CanvasShape.ATTRS =  {
+	/**
+	 * An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a
+	 * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
+	 *
+	 * @config transformOrigin
+	 * @type Array
+	 */
+	transformOrigin: {
+		valueFn: function()
+		{
+			return [0.5, 0.5];
+		}
+	},
+/**
+* <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:
+*
+*    <dl>
+*        <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>
+*        <dt>translate</dt><dd>Specifies a 2d translation.</dd>
+*        <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>
+*        <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>
+*        <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>
+*        <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>
+*        <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>
+*        <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>
+*        <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd>
+*    </dl>
+* </p>
+* <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains
+* corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the
+* `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p>
+var myRect = new Y.Rect({
+type:"rect",
+width: 50,
+height: 40,
+transform: "rotate(45)"
+};
+* <p>The code below would apply `translate` and `rotate` to an existing shape.</p>
+myRect.set("transform", "translate(40, 50) rotate(45)");
+	 * @config transform
+* @type String
+	 */
+	transform: {
+		setter: function(val)
+		{
+this.matrix.init();
+this._transforms = this.matrix.getTransformArray(val);
+this._transform = val;
+return val;
+		},
+getter: function()
+{
+return this._transform;
+}
+	},
+	/**
+	 * Dom node for the shape
+	 *
+	 * @config node
+	 * @type HTMLElement
+	 * @readOnly
+	 */
+	node: {
+		readOnly: true,
+		getter: function()
+		{
+			return this.node;
+		}
+	},
+	/**
+	 * Unique id for class instance.
+	 *
+	 * @config id
+	 * @type String
+	 */
+	id: {
+		valueFn: function()
+		{
+			return Y.guid();
+		},
+		setter: function(val)
+		{
+			var node = this.node;
+			if(node)
+			{
+				node.setAttribute("id", val);
+			}
+			return val;
+		}
+	},
+	/**
+	 * Indicates the width of the shape
+	 *
+	 * @config width
+	 * @type Number
+	 */
+	width: {
+value: 0
+},
+	/**
+	 * Indicates the height of the shape
+	 *
+	 * @config height
+	 * @type Number
+	 */
+	height: {
+value: 0
+},
+	/**
+	 * Indicates the x position of shape.
+	 *
+	 * @config x
+	 * @type Number
+	 */
+	x: {
+		value: 0
+	},
+	/**
+	 * Indicates the y position of shape.
+	 *
+	 * @config y
+	 * @type Number
+	 */
+	y: {
+		value: 0
+	},
+	/**
+	 * Indicates whether the shape is visible.
+	 *
+	 * @config visible
+	 * @type Boolean
+	 */
+	visible: {
+		value: true,
+		setter: function(val){
+			var node = this.get("node"),
+visibility = val ? "visible" : "hidden";
+			if(node)
+{
+node.style.visibility = visibility;
+}
+			return val;
+		}
+	},
+	/**
+	 * Contains information about the fill of the shape.
+*  <dl>
+*      <dt>color</dt><dd>The color of the fill.</dd>
+*      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
+*      <dt>type</dt><dd>Type of fill.
+*          <dl>
+*              <dt>solid</dt><dd>Solid single color fill. (default)</dd>
+*              <dt>linear</dt><dd>Linear gradient fill.</dd>
+*              <dt>radial</dt><dd>Radial gradient fill.</dd>
+*          </dl>
+*      </dd>
+*  </dl>
+*  <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:
+*  <dl>
+*      <dt>stops</dt><dd>An array of objects containing the following properties:
+*          <dl>
+*              <dt>color</dt><dd>The color of the stop.</dd>
+*              <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1.
+*              Note: No effect for IE 6 - 8</dd>
+*              <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>
+*          </dl>
+*      </dd>
+*      <p>Linear gradients also have the following property:</p>
+*      <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the
+*      flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
+*      <p>Radial gradients have the following additional properties:</p>
+*      <dt>r</dt><dd>Radius of the gradient circle.</dd>
+*      <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
+*      <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
+*  </dl>
+*  <p>The corresponding `SVGShape` class implements the following additional properties.</p>
+*  <dl>
+*      <dt>cx</dt><dd>
+*          <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
+*          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and
+*          `VMLShape` classes which are used on Android or IE 6 - 8.</p>
+*      </dd>
+*      <dt>cy</dt><dd>
+*          <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
+*          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape`
+*          classes which are used on Android or IE 6 - 8.</p>
+*      </dd>
+*  </dl>
+*  <p>These properties are not currently implemented in `CanvasShape` or `VMLShape`.</p>
+	 *
+	 * @config fill
+	 * @type Object
+	 */
+	fill: {
+		valueFn: "_getDefaultFill",
+		setter: function(val)
+		{
+			var fill,
+				tmpl = this.get("fill") || this._getDefaultFill();
+			fill = (val) ? Y.merge(tmpl, val) : null;
+			if(fill && fill.color)
+			{
+				if(fill.color === undefined || fill.color === "none")
+				{
+					fill.color = null;
+				}
+			}
+			this._setFillProps(fill);
+			return fill;
+		}
+	},
+	/**
+	 * Contains information about the stroke of the shape.
+*  <dl>
+*      <dt>color</dt><dd>The color of the stroke.</dd>
+*      <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
+*      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
+*      <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set
+*      to an array, the first index indicates the length of the dash. The second index indicates the length of gap.
+*      <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:
+*          <dl>
+*              <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>
+*              <dt>square</dt><dd>Specifies a sqare linecap.</dd>
+*              <dt>round</dt><dd>Specifies a round linecap.</dd>
+*          </dl>
+*      </dd>
+*      <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:
+*          <dl>
+*              <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>
+*              <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>
+*              <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin
+*              of miter, you simply specify the limit as opposed to having separate miter and miter limit values.</dd>
+*          </dl>
+*      </dd>
+*  </dl>
+	 *
+	 * @config stroke
+	 * @type Object
+	 */
+	stroke: {
+		valueFn: "_getDefaultStroke",
+		setter: function(val)
+		{
+			var tmpl = this.get("stroke") || this._getDefaultStroke(),
+wt;
+if(val && val.hasOwnProperty("weight"))
+{
+wt = parseInt(val.weight, 10);
+if(!isNaN(wt))
+{
+val.weight = wt;
+}
+}
+			val = (val) ? Y.merge(tmpl, val) : null;
+			this._setStrokeProps(val);
+			return val;
+		}
+	},
+	//Not used. Remove in future.
+	autoSize: {
+		value: false
+	},
+	// Only implemented in SVG
+	// Determines whether the instance will receive mouse events.
+	//
+	// @config pointerEvents
+	// @type string
+	//
+	pointerEvents: {
+		value: "visiblePainted"
+	},
+/**
+* Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all
+* implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using
+* respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no
+* malicious code is included in that content.
+*
+* @config data
+* @type String
+*/
+data: {
+setter: function(val)
+{
+if(this.get("node"))
+{
+this._parsePathData(val);
+}
+return val;
+}
+},
+	/**
+	 * Reference to the container Graphic.
+	 *
+	 * @config graphic
+	 * @type Graphic
+	 */
+	graphic: {
+		readOnly: true,
+		getter: function()
+		{
+			return this._graphic;
+		}
+}
+};
+Y.CanvasShape = CanvasShape;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Path.html">`Path`</a> class.
+* `CanvasPath` is not intended to be used directly. Instead, use the <a href="Path.html">`Path`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Path.html">`Path`</a>
+* class will point to the `CanvasPath` class.
+*
+* @module graphics
+* @class CanvasPath
+* @extends CanvasShape
+*/
+CanvasPath = function()
+{
+	CanvasPath.superclass.constructor.apply(this, arguments);
+};
+CanvasPath.NAME = "path";
+Y.extend(CanvasPath, Y.CanvasShape, {
+/**
+* Indicates the type of shape
+*
+* @property _type
+* @type String
+* @private
+*/
+_type: "path",
+	/**
+	 * Draws the shape.
+	 *
+	 * @method _draw
+	 * @private
+	 */
+_draw: function()
+{
+this._closePath();
+this._updateTransform();
+},
+	/**
+	 * Creates the dom node for the shape.
+	 *
+* @method createNode
+	 * @return HTMLElement
+	 * @private
+	 */
+	createNode: function()
+	{
+		var host = this,
+node = Y.config.doc.createElement('canvas'),
+			name = host.name,
+concat = host._camelCaseConcat,
+id = host.get("id");
+		host._context = node.getContext('2d');
+		node.setAttribute("overflow", "visible");
+node.setAttribute("pointer-events", "none");
+node.style.pointerEvents = "none";
+node.style.overflow = "visible";
+		node.setAttribute("id", id);
+		id = "#" + id;
+		host.node = node;
+		host.addClass(
+_getClassName(SHAPE) +
+" " +
+_getClassName(concat(IMPLEMENTATION, SHAPE)) +
+" " +
+_getClassName(name) +
+" " +
+_getClassName(concat(IMPLEMENTATION, name))
+);
+	},
+/**
+* Completes a drawing operation.
+*
+* @method end
+*/
+end: function()
+{
+this._draw();
+return this;
+}
+});
+CanvasPath.ATTRS = Y.merge(Y.CanvasShape.ATTRS, {
+	/**
+	 * Indicates the width of the shape
+	 *
+	 * @config width
+	 * @type Number
+	 */
+	width: {
+		getter: function()
+		{
+			var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
+			return this._width - offset;
+		},
+		setter: function(val)
+		{
+			this._width = val;
+			return val;
+		}
+	},
+	/**
+	 * Indicates the height of the shape
+	 *
+	 * @config height
+	 * @type Number
+	 */
+	height: {
+		getter: function()
+		{
+			var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
+return this._height - offset;
+		},
+		setter: function(val)
+		{
+			this._height = val;
+			return val;
+		}
+	},
+	/**
+	 * Indicates the path used for the node.
+	 *
+	 * @config path
+	 * @type String
+* @readOnly
+	 */
+	path: {
+readOnly: true,
+		getter: function()
+		{
+			return this._path;
+		}
+	}
+});
+Y.CanvasPath = CanvasPath;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Rect.html">`Rect`</a> class.
+* `CanvasRect` is not intended to be used directly. Instead, use the <a href="Rect.html">`Rect`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Rect.html">`Rect`</a>
+* class will point to the `CanvasRect` class.
+*
+* @module graphics
+* @class CanvasRect
+* @constructor
+*/
+CanvasRect = function()
+{
+	CanvasRect.superclass.constructor.apply(this, arguments);
+};
+CanvasRect.NAME = "rect";
+Y.extend(CanvasRect, Y.CanvasShape, {
+	/**
+	 * Indicates the type of shape
+	 *
+	 * @property _type
+	 * @type String
+* @private
+	 */
+	_type: "rect",
+	/**
+	 * Draws the shape.
+	 *
+	 * @method _draw
+	 * @private
+	 */
+	_draw: function()
+	{
+		var w = this.get("width"),
+			h = this.get("height");
+		this.clear();
+this.drawRect(0, 0, w, h);
+		this._closePath();
+	}
+});
+CanvasRect.ATTRS = Y.CanvasShape.ATTRS;
+Y.CanvasRect = CanvasRect;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Ellipse.html">`Ellipse`</a> class.
+* `CanvasEllipse` is not intended to be used directly. Instead, use the <a href="Ellipse.html">`Ellipse`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Ellipse.html">`Ellipse`</a>
+* class will point to the `CanvasEllipse` class.
+*
+* @module graphics
+* @class CanvasEllipse
+* @constructor
+*/
+CanvasEllipse = function()
+{
+	CanvasEllipse.superclass.constructor.apply(this, arguments);
+};
+CanvasEllipse.NAME = "ellipse";
+Y.extend(CanvasEllipse, CanvasShape, {
+	/**
+	 * Indicates the type of shape
+	 *
+	 * @property _type
+	 * @type String
+* @private
+	 */
+	_type: "ellipse",
+	/**
+* Draws the shape.
+*
+* @method _draw
+	 * @private
+	 */
+	_draw: function()
+	{
+		var w = this.get("width"),
+			h = this.get("height");
+		this.clear();
+this.drawEllipse(0, 0, w, h);
+		this._closePath();
+	}
+});
+CanvasEllipse.ATTRS = Y.merge(CanvasShape.ATTRS, {
+	/**
+	 * Horizontal radius for the ellipse.
+	 *
+	 * @config xRadius
+	 * @type Number
+	 */
+	xRadius: {
+		setter: function(val)
+		{
+			this.set("width", val * 2);
+		},
+		getter: function()
+		{
+			var val = this.get("width");
+			if(val)
+			{
+				val *= 0.5;
+			}
+			return val;
+		}
+	},
+	/**
+	 * Vertical radius for the ellipse.
+	 *
+	 * @config yRadius
+	 * @type Number
+	 * @readOnly
+	 */
+	yRadius: {
+		setter: function(val)
+		{
+			this.set("height", val * 2);
+		},
+		getter: function()
+		{
+			var val = this.get("height");
+			if(val)
+			{
+				val *= 0.5;
+			}
+			return val;
+		}
+	}
+});
+Y.CanvasEllipse = CanvasEllipse;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Circle.html">`Circle`</a> class.
+* `CanvasCircle` is not intended to be used directly. Instead, use the <a href="Circle.html">`Circle`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Circle.html">`Circle`</a>
+* class will point to the `CanvasCircle` class.
+*
+* @module graphics
+* @class CanvasCircle
+* @constructor
+*/
+CanvasCircle = function()
+{
+	CanvasCircle.superclass.constructor.apply(this, arguments);
+};
+CanvasCircle.NAME = "circle";
+Y.extend(CanvasCircle, Y.CanvasShape, {
+	/**
+	 * Indicates the type of shape
+	 *
+	 * @property _type
+	 * @type String
+* @private
+	 */
+	_type: "circle",
+	/**
+* Draws the shape.
+*
+* @method _draw
+	 * @private
+	 */
+	_draw: function()
+	{
+		var radius = this.get("radius");
+		if(radius)
+		{
+this.clear();
+this.drawCircle(0, 0, radius);
+			this._closePath();
+		}
+	}
+});
+CanvasCircle.ATTRS = Y.merge(Y.CanvasShape.ATTRS, {
+	/**
+	 * Indicates the width of the shape
+	 *
+	 * @config width
+	 * @type Number
+	 */
+	width: {
+setter: function(val)
+{
+this.set("radius", val/2);
+return val;
+},
+		getter: function()
+		{
+			return this.get("radius") * 2;
+		}
+	},
+	/**
+	 * Indicates the height of the shape
+	 *
+	 * @config height
+	 * @type Number
+	 */
+	height: {
+setter: function(val)
+{
+this.set("radius", val/2);
+return val;
+},
+		getter: function()
+		{
+			return this.get("radius") * 2;
+		}
+	},
+	/**
+	 * Radius of the circle
+	 *
+	 * @config radius
+* @type Number
+	 */
+	radius: {
+		lazyAdd: false
+	}
+});
+Y.CanvasCircle = CanvasCircle;
+/**
+* Draws pie slices
+*
+* @module graphics
+* @class CanvasPieSlice
+* @constructor
+*/
+CanvasPieSlice = function()
+{
+	CanvasPieSlice.superclass.constructor.apply(this, arguments);
+};
+CanvasPieSlice.NAME = "canvasPieSlice";
+Y.extend(CanvasPieSlice, Y.CanvasShape, {
+/**
+* Indicates the type of shape
+*
+* @property _type
+* @type String
+* @private
+*/
+_type: "path",
+	/**
+	 * Change event listener
+	 *
+	 * @private
+	 * @method _updateHandler
+	 */
+	_draw: function()
+	{
+var x = this.get("cx"),
+y = this.get("cy"),
+startAngle = this.get("startAngle"),
+arc = this.get("arc"),
+radius = this.get("radius");
+this.clear();
+this._left = x;
+this._right = radius;
+this._top = y;
+this._bottom = radius;
+this.drawWedge(x, y, startAngle, arc, radius);
+		this.end();
+	}
+});
+CanvasPieSlice.ATTRS = Y.mix({
+cx: {
+value: 0
+},
+cy: {
+value: 0
+},
+/**
+* Starting angle in relation to a circle in which to begin the pie slice drawing.
+*
+* @config startAngle
+* @type Number
+*/
+startAngle: {
+value: 0
+},
+/**
+* Arc of the slice.
+*
+* @config arc
+* @type Number
+*/
+arc: {
+value: 0
+},
+/**
+* Radius of the circle in which the pie slice is drawn
+*
+* @config radius
+* @type Number
+*/
+radius: {
+value: 0
+}
+}, Y.CanvasShape.ATTRS);
+Y.CanvasPieSlice = CanvasPieSlice;
+/**
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the `Graphic` class.
+* `CanvasGraphic` is not intended to be used directly. Instead, use the <a href="Graphic.html">`Graphic`</a> class.
+* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
+* <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Graphic.html">`Graphic`</a>
+* class will point to the `CanvasGraphic` class.
+*
+* @module graphics
+* @class CanvasGraphic
+* @constructor
+*/
+function CanvasGraphic() {
+CanvasGraphic.superclass.constructor.apply(this, arguments);
+}
+CanvasGraphic.NAME = "canvasGraphic";
+CanvasGraphic.ATTRS = {
+/**
+* Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node
+* instance or a CSS selector string.
+*
+* @config render
+* @type Node | String
+*/
+render: {},
+/**
+	 * Unique id for class instance.
+	 *
+	 * @config id
+	 * @type String
+	 */
+	id: {
+		valueFn: function()
+		{
+			return Y.guid();
+		},
+		setter: function(val)
+		{
+			var node = this._node;
+			if(node)
+			{
+				node.setAttribute("id", val);
+			}
+			return val;
+		}
+	},
+/**
+* Key value pairs in which a shape instance is associated with its id.
+*
+*  @config shapes
+*  @type Object
+*  @readOnly
+*/
+shapes: {
+readOnly: true,
+getter: function()
+{
+return this._shapes;
+}
+},
+/**
+*  Object containing size and coordinate data for the content of a Graphic in relation to the graphic instance's position.
+*
+*  @config contentBounds
+*  @type Object
+*  @readOnly
+*/
+contentBounds: {
+readOnly: true,
+getter: function()
+{
+return this._contentBounds;
+}
+},
+/**
+*  The outermost html element of the Graphic instance.
+*
+*  @config node
+*  @type HTMLElement
+*  @readOnly
+*/
+node: {
+readOnly: true,
+getter: function()
+{
+return this._node;
+}
+},
+	/**
+	 * Indicates the width of the `Graphic`.
+	 *
+	 * @config width
+	 * @type Number
+	 */
+width: {
+setter: function(val)
+{
+if(this._node)
+{
+this._node.style.width = val + "px";
+}
+return val;
+}
+},
+	/**
+	 * Indicates the height of the `Graphic`.
+	 *
+	 * @config height
+	 * @type Number
+	 */
+height: {
+setter: function(val)
+{
+if(this._node)
+{
+this._node.style.height = val + "px";
+}
+return val;
+}
+},
+/**
+*  Determines the sizing of the Graphic.
+*
+*  <dl>
+*      <dt>sizeContentToGraphic</dt><dd>The Graphic's width and height attributes are, either explicitly set through the
+*      <code>width</code> and <code>height</code> attributes or are determined by the dimensions of the parent element. The
+*      content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this
+*      setting, the <code>preserveAspectRatio</code> attribute will determine how the contents are sized.</dd>
+*      <dt>sizeGraphicToContent</dt><dd>(Also accepts a value of true) The Graphic's width and height are determined by the
+*      size and positioning of the content.</dd>
+*      <dt>false</dt><dd>The Graphic's width and height attributes are, either explicitly set through the <code>width</code>
+*      and <code>height</code> attributes or are determined by the dimensions of the parent element. The contents of the
+*      Graphic instance are not affected by this setting.</dd>
+*  </dl>
+*
+*
+*  @config autoSize
+*  @type Boolean | String
+*  @default false
+*/
+autoSize: {
+value: false
+},
+/**
+* Determines how content is sized when <code>autoSize</code> is set to <code>sizeContentToGraphic</code>.
+*
+*  <dl>
+*      <dt>none<dt><dd>Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary
+*      such that the element's bounding box exactly matches the viewport rectangle.</dd>
+*      <dt>xMinYMin</dt><dd>Force uniform scaling position along the top left of the Graphic's node.</dd>
+*      <dt>xMidYMin</dt><dd>Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.<dd>
+*      <dt>xMaxYMin</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the top.</dd>
+*      <dt>xMinYMid</dt>Force uniform scaling positioned horizontally from the left and vertically centered.</dd>
+*      <dt>xMidYMid (the default)</dt><dd>Force uniform scaling with the content centered.</dd>
+*      <dt>xMaxYMid</dt><dd>Force uniform scaling positioned horizontally from the right and vertically centered.</dd>
+*      <dt>xMinYMax</dt><dd>Force uniform scaling positioned horizontally from the left and vertically from the bottom.</dd>
+*      <dt>xMidYMax</dt><dd>Force uniform scaling horizontally centered and position vertically from the bottom.</dd>
+*      <dt>xMaxYMax</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the bottom.</dd>
+*  </dl>
+*
+* @config preserveAspectRatio
+* @type String
+* @default xMidYMid
+*/
+preserveAspectRatio: {
+value: "xMidYMid"
+},
+/**
+* The contentBounds will resize to greater values but not smaller values. (for performance)
+* When resizing the contentBounds down is desirable, set the resizeDown value to true.
+*
+* @config resizeDown
+* @type Boolean
+*/
+resizeDown: {
+value: false
+},
+	/**
+	 * Indicates the x-coordinate for the instance.
+	 *
+	 * @config x
+	 * @type Number
+	 */
+x: {
+getter: function()
+{
+return this._x;
+},
+setter: function(val)
+{
+this._x = val;
+if(this._node)
+{
+this._node.style.left = val + "px";
+}
+return val;
+}
+},
+	/**
+	 * Indicates the y-coordinate for the instance.
+	 *
+	 * @config y
+	 * @type Number
+	 */
+y: {
+getter: function()
+{
+return this._y;
+},
+setter: function(val)
+{
+this._y = val;
+if(this._node)
+{
+this._node.style.top = val + "px";
+}
+return val;
+}
+},
+/**
+* Indicates whether or not the instance will automatically redraw after a change is made to a shape.
+* This property will get set to false when batching operations.
+*
+* @config autoDraw
+* @type Boolean
+* @default true
+* @private
+*/
+autoDraw: {
+value: true
+},
+	/**
+	 * Indicates whether the `Graphic` and its children are visible.
+	 *
+	 * @config visible
+	 * @type Boolean
+	 */
+visible: {
+value: true,
+setter: function(val)
+{
+this._toggleVisible(val);
+return val;
+}
+}
+};
+Y.extend(CanvasGraphic, Y.GraphicBase, {
+/**
+* Sets the value of an attribute.
+*
+* @method set
+* @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can
+* be passed in to set multiple attributes at once.
+* @param {Any} value The value to set the attribute to. This value is ignored if an object is received as
+* the name param.
+*/
+	set: function()
+	{
+		var host = this,
+attr = arguments[0],
+redrawAttrs = {
+autoDraw: true,
+autoSize: true,
+preserveAspectRatio: true,
+resizeDown: true
+},
+key,
+forceRedraw = false;
+		AttributeLite.prototype.set.apply(host, arguments);
+if(host._state.autoDraw === true && Y.Object.size(this._shapes) > 0)
+{
+if(Y_LANG.isString && redrawAttrs[attr])
+{
+forceRedraw = true;
+}
+else if(Y_LANG.isObject(attr))
+{
+for(key in redrawAttrs)
+{
+if(redrawAttrs.hasOwnProperty(key) && attr[key])
+{
+forceRedraw = true;
+break;
+}
+}
+}
+}
+if(forceRedraw)
+{
+host._redraw();
+}
+	},
+/**
+* Storage for `x` attribute.
+*
+* @property _x
+* @type Number
+* @private
+*/
+_x: 0,
+/**
+* Storage for `y` attribute.
+*
+* @property _y
+* @type Number
+* @private
+*/
+_y: 0,
+/**
+* Gets the current position of the graphic instance in page coordinates.
+*
+* @method getXY
+* @return Array The XY position of the shape.
+*/
+getXY: function()
+{
+var node = this._node,
+xy;
+if(node)
+{
+xy = Y.DOM.getXY(node);
+}
+return xy;
+},
+	/**
+* Initializes the class.
+*
+* @method initializer
+* @param {Object} config Optional attributes
+* @private
+*/
+initializer: function() {
+var render = this.get("render"),
+visibility = this.get("visible") ? "visible" : "hidden",
+w = this.get("width") || 0,
+h = this.get("height") || 0;
+this._shapes = {};
+this._redrawQueue = {};
+		this._contentBounds = {
+left: 0,
+top: 0,
+right: 0,
+bottom: 0
+};
+this._node = DOCUMENT.createElement('div');
+this._node.style.position = "absolute";
+this._node.style.visibility = visibility;
+this.set("width", w);
+this.set("height", h);
+if(render)
+{
+this.render(render);
+}
+},
+/**
+* Adds the graphics node to the dom.
+*
+* @method render
+* @param {HTMLElement} parentNode node in which to render the graphics node into.
+*/
+render: function(render) {
+var parentNode = render || DOCUMENT.body,
+node = this._node,
+w,
+h;
+if(render instanceof Y.Node)
+{
+parentNode = render._node;
+}
+else if(Y.Lang.isString(render))
+{
+parentNode = Y.Selector.query(render, DOCUMENT.body, true);
+}
+w = this.get("width") || parseInt(Y.DOM.getComputedStyle(parentNode, "width"), 10);
+h = this.get("height") || parseInt(Y.DOM.getComputedStyle(parentNode, "height"), 10);
+parentNode.appendChild(node);
+node.style.display = "block";
+node.style.position = "absolute";
+node.style.left = this.get("x") + "px";
+node.style.top = this.get("y") + "px";
+this.set("width", w);
+this.set("height", h);
+this.parentNode = parentNode;
+return this;
+},
+/**
+* Removes all nodes.
+*
+* @method destroy
+*/
+destroy: function()
+{
+this.removeAllShapes();
+if(this._node)
+{
+this._removeChildren(this._node);
+if(this._node.parentNode)
+{
+this._node.parentNode.removeChild(this._node);
+}
+this._node = null;
+}
+},
+/**
+* Generates a shape instance by type.
+*
+* @method addShape
+* @param {Object} cfg attributes for the shape
+* @return Shape
+*/
+addShape: function(cfg)
+{
+cfg.graphic = this;
+if(!this.get("visible"))
+{
+cfg.visible = false;
+}
+var ShapeClass = this._getShapeClass(cfg.type),
+shape = new ShapeClass(cfg);
+this._appendShape(shape);
+return shape;
+},
+/**
+* Adds a shape instance to the graphic instance.
+*
+* @method _appendShape
+* @param {Shape} shape The shape instance to be added to the graphic.
+* @private
+*/
+_appendShape: function(shape)
+{
+var node = shape.node,
+parentNode = this._frag || this._node;
+if(this.get("autoDraw"))
+{
+parentNode.appendChild(node);
+}
+else
+{
+this._getDocFrag().appendChild(node);
+}
+},
+/**
+* Removes a shape instance from from the graphic instance.
+*
+* @method removeShape
+* @param {Shape|String} shape The instance or id of the shape to be removed.
+*/
+removeShape: function(shape)
+{
+if(!(shape instanceof CanvasShape))
+{
+if(Y_LANG.isString(shape))
+{
+shape = this._shapes[shape];
+}
+}
+if(shape && shape instanceof CanvasShape)
+{
+shape._destroy();
+delete this._shapes[shape.get("id")];
+}
+if(this.get("autoDraw"))
+{
+this._redraw();
+}
+return shape;
+},
+/**
+* Removes all shape instances from the dom.
+*
+* @method removeAllShapes
+*/
+removeAllShapes: function()
+{
+var shapes = this._shapes,
+i;
+for(i in shapes)
+{
+if(shapes.hasOwnProperty(i))
+{
+shapes[i].destroy();
+}
+}
+this._shapes = {};
+},
+/**
+* Clears the graphics object.
+*
+* @method clear
+*/
+clear: function() {
+this.removeAllShapes();
+},
+/**
+* Removes all child nodes.
+*
+* @method _removeChildren
+* @param {HTMLElement} node
+* @private
+*/
+_removeChildren: function(node)
+{
+if(node && node.hasChildNodes())
+{
+var child;
+while(node.firstChild)
+{
+child = node.firstChild;
+this._removeChildren(child);
+node.removeChild(child);
+}
+}
+},
+/**
+* Toggles visibility
+*
+* @method _toggleVisible
+* @param {Boolean} val indicates visibilitye
+* @private
+*/
+_toggleVisible: function(val)
+{
+var i,
+shapes = this._shapes,
+visibility = val ? "visible" : "hidden";
+if(shapes)
+{
+for(i in shapes)
+{
+if(shapes.hasOwnProperty(i))
+{
+shapes[i].set("visible", val);
+}
+}
+}
+if(this._node)
+{
+this._node.style.visibility = visibility;
+}
+},
+/**
+* Returns a shape class. Used by `addShape`.
+*
+* @method _getShapeClass
+* @param {Shape | String} val Indicates which shape class.
+* @return Function
+* @private
+*/
+_getShapeClass: function(val)
+{
+var shape = this._shapeClass[val];
+if(shape)
+{
+return shape;
+}
+return val;
+},
+/**
+* Look up for shape classes. Used by `addShape` to retrieve a class for instantiation.
+*
+* @property _shapeClass
+* @type Object
+* @private
+*/
+_shapeClass: {
+circle: Y.CanvasCircle,
+rect: Y.CanvasRect,
+path: Y.CanvasPath,
+ellipse: Y.CanvasEllipse,
+pieslice: Y.CanvasPieSlice
+},
+/**
+* Returns a shape based on the id of its dom node.
+*
+* @method getShapeById
+* @param {String} id Dom id of the shape's node attribute.
+* @return Shape
+*/
+getShapeById: function(id)
+{
+var shape = this._shapes[id];
+return shape;
+},
+	/**
+	 * Allows for creating multiple shapes in order to batch appending and redraw operations.
+	 *
+	 * @method batch
+	 * @param {Function} method Method to execute.
+	 */
+batch: function(method)
+{
+var autoDraw = this.get("autoDraw");
+this.set("autoDraw", false);
+method();
+this.set("autoDraw", autoDraw);
+},
+/**
+* Returns a document fragment to for attaching shapes.
+*
+* @method _getDocFrag
+* @return DocumentFragment
+* @private
+*/
+_getDocFrag: function()
+{
+if(!this._frag)
+{
+this._frag = DOCUMENT.createDocumentFragment();
+}
+return this._frag;
+},
+/**
+* Redraws all shapes.
+*
+* @method _redraw
+* @private
+*/
+_redraw: function()
+{
+var autoSize = this.get("autoSize"),
+preserveAspectRatio = this.get("preserveAspectRatio"),
+box = this.get("resizeDown") ? this._getUpdatedContentBounds() : this._contentBounds,
+contentWidth,
+contentHeight,
+w,
+h,
+xScale,
+yScale,
+translateX = 0,
+translateY = 0,
+matrix,
+node = this.get("node");
+if(autoSize)
+{
+if(autoSize === "sizeContentToGraphic")
+{
+contentWidth = box.right - box.left;
+contentHeight = box.bottom - box.top;
+w = parseFloat(Y_DOM.getComputedStyle(node, "width"));
+h = parseFloat(Y_DOM.getComputedStyle(node, "height"));
+matrix = new Y.Matrix();
+if(preserveAspectRatio === "none")
+{
+xScale = w/contentWidth;
+yScale = h/contentHeight;
+}
+else
+{
+if(contentWidth/contentHeight !== w/h)
+{
+if(contentWidth * h/contentHeight > w)
+{
+xScale = yScale = w/contentWidth;
+translateY = this._calculateTranslate(preserveAspectRatio.slice(5).toLowerCase(), contentHeight * w/contentWidth, h);
+}
+else
+{
+xScale = yScale = h/contentHeight;
+translateX = this._calculateTranslate(preserveAspectRatio.slice(1, 4).toLowerCase(), contentWidth * h/contentHeight, w);
+}
+}
+}
+Y_DOM.setStyle(node, "transformOrigin", "0% 0%");
+translateX = translateX - (box.left * xScale);
+translateY = translateY - (box.top * yScale);
+matrix.translate(translateX, translateY);
+matrix.scale(xScale, yScale);
+Y_DOM.setStyle(node, "transform", matrix.toCSSText());
+}
+else
+{
+this.set("width", box.right);
+this.set("height", box.bottom);
+}
+}
+if(this._frag)
+{
+this._node.appendChild(this._frag);
+this._frag = null;
+}
+},
+/**
+* Determines the value for either an x or y value to be used for the <code>translate</code> of the Graphic.
+*
+* @method _calculateTranslate
+* @param {String} position The position for placement. Possible values are min, mid and max.
+* @param {Number} contentSize The total size of the content.
+* @param {Number} boundsSize The total size of the Graphic.
+* @return Number
+* @private
+*/
+_calculateTranslate: function(position, contentSize, boundsSize)
+{
+var ratio = boundsSize - contentSize,
+coord;
+switch(position)
+{
+case "mid" :
+coord = ratio * 0.5;
+break;
+case "max" :
+coord = ratio;
+break;
+default :
+coord = 0;
+break;
+}
+return coord;
+},
+/**
+* Adds a shape to the redraw queue and calculates the contentBounds. Used internally
+* by `Shape` instances.
+*
+* @method addToRedrawQueue
+* @param Shape shape The shape instance to add to the queue
+* @protected
+*/
+addToRedrawQueue: function(shape)
+{
+var shapeBox,
+box;
+this._shapes[shape.get("id")] = shape;
+if(!this.get("resizeDown"))
+{
+shapeBox = shape.getBounds();
+box = this._contentBounds;
+box.left = box.left < shapeBox.left ? box.left : shapeBox.left;
+box.top = box.top < shapeBox.top ? box.top : shapeBox.top;
+box.right = box.right > shapeBox.right ? box.right : shapeBox.right;
+box.bottom = box.bottom > shapeBox.bottom ? box.bottom : shapeBox.bottom;
+this._contentBounds = box;
+}
+if(this.get("autoDraw"))
+{
+this._redraw();
+}
+},
+/**
+* Recalculates and returns the `contentBounds` for the `Graphic` instance.
+*
+* @method _getUpdatedContentBounds
+* @return {Object}
+* @private
+*/
+_getUpdatedContentBounds: function()
+{
+var bounds,
+i,
+shape,
+queue = this._shapes,
+box = {};
+for(i in queue)
+{
+if(queue.hasOwnProperty(i))
+{
+shape = queue[i];
+bounds = shape.getBounds();
+box.left = Y_LANG.isNumber(box.left) ? Math.min(box.left, bounds.left) : bounds.left;
+box.top = Y_LANG.isNumber(box.top) ? Math.min(box.top, bounds.top) : bounds.top;
+box.right = Y_LANG.isNumber(box.right) ? Math.max(box.right, bounds.right) : bounds.right;
+box.bottom = Y_LANG.isNumber(box.bottom) ? Math.max(box.bottom, bounds.bottom) : bounds.bottom;
+}
+}
+box.left = Y_LANG.isNumber(box.left) ? box.left : 0;
+box.top = Y_LANG.isNumber(box.top) ? box.top : 0;
+box.right = Y_LANG.isNumber(box.right) ? box.right : 0;
+box.bottom = Y_LANG.isNumber(box.bottom) ? box.bottom : 0;
+this._contentBounds = box;
+return box;
+},
+/**
+* Inserts shape on the top of the tree.
+*
+* @method _toFront
+* @param {CanvasShape} Shape to add.
+* @private
+*/
+_toFront: function(shape)
+{
+var contentNode = this.get("node");
+if(shape instanceof Y.CanvasShape)
+{
+shape = shape.get("node");
+}
+if(contentNode && shape)
+{
+contentNode.appendChild(shape);
+}
+},
+/**
+* Inserts shape as the first child of the content node.
+*
+* @method _toBack
+* @param {CanvasShape} Shape to add.
+* @private
+*/
+_toBack: function(shape)
+{
+var contentNode = this.get("node"),
+targetNode;
+if(shape instanceof Y.CanvasShape)
+{
+shape = shape.get("node");
+}
+if(contentNode && shape)
+{
+targetNode = contentNode.firstChild;
+if(targetNode)
+{
+contentNode.insertBefore(shape, targetNode);
+}
+else
+{
+contentNode.appendChild(shape);
+}
+}
+}
+});
+Y.CanvasGraphic = CanvasGraphic;
+}, '@VERSION@', {"requires": ["graphics"]});

comt