if (!dojo._hasResource["dojox.gfx.canvas"]) { // _hasResource checks added by
												// build. Do not use
												// _hasResource directly in your
												// code.
	dojo._hasResource["dojox.gfx.canvas"] = true;
	dojo.provide("dojox.gfx.canvas");

	dojo.require("dojox.gfx._base");
	dojo.require("dojox.gfx.shape");
	dojo.require("dojox.gfx.path");
	dojo.require("dojox.gfx.arc");
	dojo.require("dojox.gfx.decompose");

	dojo.experimental("dojox.gfx.canvas");

	(function() {
		var g = dojox.gfx, gs = g.shape, ga = g.arc, m = g.matrix, mp = m.multiplyPoint, twoPI = 2
				* Math.PI;

		dojo.extend(g.Shape, {
					render : function(/* Object */ctx) {
						// summary: render the shape
						ctx.save();
						this._renderTransform(ctx);
						this._renderShape(ctx);
						this._renderFill(ctx, true);
						this._renderStroke(ctx, true);
						ctx.restore();
					},
					_renderTransform : function(/* Object */ctx) {
						if ("canvasTransform" in this) {
							var t = this.canvasTransform;
							ctx.translate(t.dx, t.dy);
							ctx.rotate(t.angle2);
							ctx.scale(t.sx, t.sy);
							ctx.rotate(t.angle1);
							// The future implementation when vendors catch up
							// with the spec:
							// var t = this.matrix;
							// ctx.transform(t.xx, t.yx, t.xy, t.yy, t.dx,
							// t.dy);
						}
					},
					_renderShape : function(/* Object */ctx) {
						// nothing
					},
					_renderFill : function(/* Object */ctx, /* Boolean */
							apply) {
						if ("canvasFill" in this) {
							if ("canvasFillImage" in this) {
								this.canvasFill = ctx.createPattern(
										this.canvasFillImage, "repeat");
								delete this.canvasFillImage;
							}
							ctx.fillStyle = this.canvasFill;
							if (apply) {
								ctx.fill();
							}
						} else {
							ctx.fillStyle = "rgba(0,0,0,0.0)";
						}
					},
					_renderStroke : function(/* Object */ctx, /* Boolean */
							apply) {
						var s = this.strokeStyle;
						if (s) {
							ctx.strokeStyle = s.color.toString();
							ctx.lineWidth = s.width;
							ctx.lineCap = s.cap;
							if (typeof s.join == "number") {
								ctx.lineJoin = "miter";
								ctx.miterLimit = s.join;
							} else {
								ctx.lineJoin = s.join;
							}
							if (apply) {
								ctx.stroke();
							}
						} else if (!apply) {
							ctx.strokeStyle = "rgba(0,0,0,0.0)";
						}
					},

					// events are not implemented
					getEventSource : function() {
						return null;
					},
					connect : function() {
					},
					disconnect : function() {
					}
				});

		var modifyMethod = function(shape, method, extra) {
			var old = shape.prototype[method];
			shape.prototype[method] = extra ? function() {
				this.surface.makeDirty();
				old.apply(this, arguments);
				extra.call(this);
				return this;
			} : function() {
				this.surface.makeDirty();
				return old.apply(this, arguments);
			};
		};

		modifyMethod(g.Shape, "setTransform", function() {
					// prepare Canvas-specific structures
					if (this.matrix) {
						this.canvasTransform = g.decompose(this.matrix);
					} else {
						delete this.canvasTransform;
					}
				});

		modifyMethod(g.Shape, "setFill", function() {
					// prepare Canvas-specific structures
					var fs = this.fillStyle, f;
					if (fs) {
						if (typeof(fs) == "object" && "type" in fs) {
							var ctx = this.surface.rawNode.getContext("2d");
							switch (fs.type) {
								case "linear" :
								case "radial" :
									f = fs.type == "linear" ? ctx
											.createLinearGradient(fs.x1, fs.y1,
													fs.x2, fs.y2) : ctx
											.createRadialGradient(fs.cx, fs.cy,
													0, fs.cx, fs.cy, fs.r);
									dojo.forEach(fs.colors, function(step) {
												f
														.addColorStop(
																step.offset,
																g
																		.normalizeColor(step.color)
																		.toString());
											});
									break;
								case "pattern" :
									var img = new Image(fs.width, fs.height);
									this.surface.downloadImage(img, fs.src);
									this.canvasFillImage = img;
							}
						} else {
							// Set fill color using CSS RGBA func style
							f = fs.toString();
						}
						this.canvasFill = f;
					} else {
						delete this.canvasFill;
					}
				});

		modifyMethod(g.Shape, "setStroke");
		modifyMethod(g.Shape, "setShape");

		dojo.declare("dojox.gfx.Group", g.Shape, {
					// summary: a group shape (Canvas), which can be used
					// to logically group shapes (e.g, to propagate matricies)
					constructor : function() {
						gs.Container._init.call(this);
					},
					render : function(/* Object */ctx) {
						// summary: render the group
						ctx.save();
						this._renderTransform(ctx);
						this._renderFill(ctx);
						this._renderStroke(ctx);
						for (var i = 0; i < this.children.length; ++i) {
							this.children[i].render(ctx);
						}
						ctx.restore();
					}
				});

		dojo.declare("dojox.gfx.Rect", gs.Rect, {
			// summary: a rectangle shape (Canvas)
			_renderShape : function(/* Object */ctx) {
				var s = this.shape, r = Math
						.min(s.r, s.height / 2, s.width / 2), xl = s.x, xr = xl
						+ s.width, yt = s.y, yb = yt + s.height, xl2 = xl + r, xr2 = xr
						- r, yt2 = yt + r, yb2 = yb - r;
				ctx.beginPath();
				ctx.moveTo(xl2, yt);
				ctx.lineTo(xr2, yt);
				if (r) {
					ctx.arcTo(xr, yt, xr, yt2, r);
				}
				ctx.lineTo(xr, yb2);
				if (r) {
					ctx.arcTo(xr, yb, xr2, yb, r);
				}
				ctx.lineTo(xl2, yb);
				if (r) {
					ctx.arcTo(xl, yb, xl, yb2, r);
				}
				ctx.lineTo(xl, yt2);
				if (r) {
					ctx.arcTo(xl, yt, xl2, yt, r);
				}
				ctx.closePath();
			}
		});

		var bezierCircle = [];
		(function() {
			var u = ga.curvePI4;
			bezierCircle.push(u.s, u.c1, u.c2, u.e);
			for (var a = 45; a < 360; a += 45) {
				var r = m.rotateg(a);
				bezierCircle.push(mp(r, u.c1), mp(r, u.c2), mp(r, u.e));
			}
		})();

		dojo.declare("dojox.gfx.Ellipse", gs.Ellipse, {
					// summary: an ellipse shape (Canvas)
					setShape : function() {
						g.Ellipse.superclass.setShape.apply(this, arguments);
						// prepare Canvas-specific structures
						var s = this.shape, t, c1, c2, r = [], M = m
								.normalize([m.translate(s.cx, s.cy),
										m.scale(s.rx, s.ry)]);
						t = mp(M, bezierCircle[0]);
						r.push([t.x, t.y]);
						for (var i = 1; i < bezierCircle.length; i += 3) {
							c1 = mp(M, bezierCircle[i]);
							c2 = mp(M, bezierCircle[i + 1]);
							t = mp(M, bezierCircle[i + 2]);
							r.push([c1.x, c1.y, c2.x, c2.y, t.x, t.y]);
						}
						this.canvasEllipse = r;
						return this;
					},
					_renderShape : function(/* Object */ctx) {
						var r = this.canvasEllipse;
						ctx.beginPath();
						ctx.moveTo.apply(ctx, r[0]);
						for (var i = 1; i < r.length; ++i) {
							ctx.bezierCurveTo.apply(ctx, r[i]);
						}
						ctx.closePath();
					}
				});

		dojo.declare("dojox.gfx.Circle", gs.Circle, {
					// summary: a circle shape (Canvas)
					_renderShape : function(/* Object */ctx) {
						var s = this.shape;
						ctx.beginPath();
						ctx.arc(s.cx, s.cy, s.r, 0, twoPI, 1);
					}
				});

		dojo.declare("dojox.gfx.Line", gs.Line, {
					// summary: a line shape (Canvas)
					_renderShape : function(/* Object */ctx) {
						var s = this.shape;
						ctx.beginPath();
						ctx.moveTo(s.x1, s.y1);
						ctx.lineTo(s.x2, s.y2);
					}
				});

		dojo.declare("dojox.gfx.Polyline", gs.Polyline, {
					// summary: a polyline/polygon shape (Canvas)
					setShape : function() {
						g.Polyline.superclass.setShape.apply(this, arguments);
						// prepare Canvas-specific structures
						var p = this.shape.points, f = p[0], r = [], c, i;
						if (p.length) {
							if (typeof f == "number") {
								r.push(f, p[1]);
								i = 2;
							} else {
								r.push(f.x, f.y);
								i = 1;
							}
							for (; i < p.length; ++i) {
								c = p[i];
								if (typeof c == "number") {
									r.push(c, p[++i]);
								} else {
									r.push(c.x, c.y);
								}
							}
						}
						this.canvasPolyline = r;
						return this;
					},
					_renderShape : function(/* Object */ctx) {
						var p = this.canvasPolyline;
						if (p.length) {
							ctx.beginPath();
							ctx.moveTo(p[0], p[1]);
							for (var i = 2; i < p.length; i += 2) {
								ctx.lineTo(p[i], p[i + 1]);
							}
						}
					}
				});

		dojo.declare("dojox.gfx.Image", gs.Image, {
					// summary: an image shape (Canvas)
					setShape : function() {
						g.Image.superclass.setShape.apply(this, arguments);
						// prepare Canvas-specific structures
						var img = new Image();
						this.surface.downloadImage(img, this.shape.src);
						this.canvasImage = img;
						return this;
					},
					_renderShape : function(/* Object */ctx) {
						var s = this.shape;
						ctx.drawImage(this.canvasImage, s.x, s.y, s.width,
								s.height);
					}
				});

		dojo.declare("dojox.gfx.Text", gs.Text, {
					// summary: a text shape (Canvas)
					_renderShape : function(/* Object */ctx) {
						var s = this.shape;
						// nothing for the moment
					}
				});
		modifyMethod(g.Text, "setFont");

		var pathRenderers = {
			M : "_moveToA",
			m : "_moveToR",
			L : "_lineToA",
			l : "_lineToR",
			H : "_hLineToA",
			h : "_hLineToR",
			V : "_vLineToA",
			v : "_vLineToR",
			C : "_curveToA",
			c : "_curveToR",
			S : "_smoothCurveToA",
			s : "_smoothCurveToR",
			Q : "_qCurveToA",
			q : "_qCurveToR",
			T : "_qSmoothCurveToA",
			t : "_qSmoothCurveToR",
			A : "_arcTo",
			a : "_arcTo",
			Z : "_closePath",
			z : "_closePath"
		};

		dojo.declare("dojox.gfx.Path", g.path.Path, {
			// summary: a path shape (Canvas)
			constructor : function() {
				this.last = {};
				this.lastControl = {};
			},
			setShape : function() {
				this.canvasPath = [];
				return g.Path.superclass.setShape.apply(this, arguments);
			},
			_updateWithSegment : function(segment) {
				var last = dojo.clone(this.last);
				this[pathRenderers[segment.action]](this.canvasPath,
						segment.action, segment.args);
				this.last = last;
				g.Path.superclass._updateWithSegment.apply(this, arguments);
			},
			_renderShape : function(/* Object */ctx) {
				var r = this.canvasPath;
				ctx.beginPath();
				for (var i = 0; i < r.length; i += 2) {
					ctx[r[i]].apply(ctx, r[i + 1]);
				}
			},
			_moveToA : function(result, action, args) {
				result.push("moveTo", [args[0], args[1]]);
				for (var i = 2; i < args.length; i += 2) {
					result.push("lineTo", [args[i], args[i + 1]]);
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
				this.lastControl = {};
			},
			_moveToR : function(result, action, args) {
				if ("x" in this.last) {
					result.push("moveTo", [this.last.x += args[0],
									this.last.y += args[1]]);
				} else {
					result.push("moveTo", [this.last.x = args[0],
									this.last.y = args[1]]);
				}
				for (var i = 2; i < args.length; i += 2) {
					result.push("lineTo", [this.last.x += args[i],
									this.last.y += args[i + 1]]);
				}
				this.lastControl = {};
			},
			_lineToA : function(result, action, args) {
				for (var i = 0; i < args.length; i += 2) {
					result.push("lineTo", [args[i], args[i + 1]]);
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
				this.lastControl = {};
			},
			_lineToR : function(result, action, args) {
				for (var i = 0; i < args.length; i += 2) {
					result.push("lineTo", [this.last.x += args[i],
									this.last.y += args[i + 1]]);
				}
				this.lastControl = {};
			},
			_hLineToA : function(result, action, args) {
				for (var i = 0; i < args.length; ++i) {
					result.push("lineTo", [args[i], this.last.y]);
				}
				this.last.x = args[args.length - 1];
				this.lastControl = {};
			},
			_hLineToR : function(result, action, args) {
				for (var i = 0; i < args.length; ++i) {
					result
							.push("lineTo", [this.last.x += args[i],
											this.last.y]);
				}
				this.lastControl = {};
			},
			_vLineToA : function(result, action, args) {
				for (var i = 0; i < args.length; ++i) {
					result.push("lineTo", [this.last.x, args[i]]);
				}
				this.last.y = args[args.length - 1];
				this.lastControl = {};
			},
			_vLineToR : function(result, action, args) {
				for (var i = 0; i < args.length; ++i) {
					result
							.push("lineTo", [this.last.x,
											this.last.y += args[i]]);
				}
				this.lastControl = {};
			},
			_curveToA : function(result, action, args) {
				for (var i = 0; i < args.length; i += 6) {
					result.push("bezierCurveTo", args.slice(i, i + 6));
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
				this.lastControl.x = args[args.length - 4];
				this.lastControl.y = args[args.length - 3];
				this.lastControl.type = "C";
			},
			_curveToR : function(result, action, args) {
				for (var i = 0; i < args.length; i += 6) {
					result.push("bezierCurveTo", [
									this.last.x + args[i],
									this.last.y + args[i + 1],
									this.lastControl.x = this.last.x
											+ args[i + 2],
									this.lastControl.y = this.last.y
											+ args[i + 3],
									this.last.x + args[i + 4],
									this.last.y + args[i + 5]]);
					this.last.x += args[i + 4];
					this.last.y += args[i + 5];
				}
				this.lastControl.type = "C";
			},
			_smoothCurveToA : function(result, action, args) {
				for (var i = 0; i < args.length; i += 4) {
					var valid = this.lastControl.type == "C";
					result.push("bezierCurveTo", [
									valid ? 2 * this.last.x
											- this.lastControl.x : this.last.x,
									valid ? 2 * this.last.y
											- this.lastControl.y : this.last.y,
									args[i], args[i + 1], args[i + 2],
									args[i + 3]]);
					this.lastControl.x = args[i];
					this.lastControl.y = args[i + 1];
					this.lastControl.type = "C";
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
			},
			_smoothCurveToR : function(result, action, args) {
				for (var i = 0; i < args.length; i += 4) {
					var valid = this.lastControl.type == "C";
					result.push("bezierCurveTo", [
									valid ? 2 * this.last.x
											- this.lastControl.x : this.last.x,
									valid ? 2 * this.last.y
											- this.lastControl.y : this.last.y,
									this.last.x + args[i],
									this.last.y + args[i + 1],
									this.last.x + args[i + 2],
									this.last.y + args[i + 3]]);
					this.lastControl.x = this.last.x + args[i];
					this.lastControl.y = this.last.y + args[i + 1];
					this.lastControl.type = "C";
					this.last.x += args[i + 2];
					this.last.y += args[i + 3];
				}
			},
			_qCurveToA : function(result, action, args) {
				for (var i = 0; i < args.length; i += 4) {
					result.push("quadraticCurveTo", args.slice(i, i + 4));
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
				this.lastControl.x = args[args.length - 4];
				this.lastControl.y = args[args.length - 3];
				this.lastControl.type = "Q";
			},
			_qCurveToR : function(result, action, args) {
				for (var i = 0; i < args.length; i += 4) {
					result.push("quadraticCurveTo", [
									this.lastControl.x = this.last.x + args[i],
									this.lastControl.y = this.last.y
											+ args[i + 1],
									this.last.x + args[i + 2],
									this.last.y + args[i + 3]]);
					this.last.x += args[i + 2];
					this.last.y += args[i + 3];
				}
				this.lastControl.type = "Q";
			},
			_qSmoothCurveToA : function(result, action, args) {
				for (var i = 0; i < args.length; i += 2) {
					var valid = this.lastControl.type == "Q";
					result
							.push(
									"quadraticCurveTo",
									[
											this.lastControl.x = valid
													? 2
															* this.last.x
															- this.lastControl.x
													: this.last.x,
											this.lastControl.y = valid
													? 2
															* this.last.y
															- this.lastControl.y
													: this.last.y, args[i],
											args[i + 1]]);
					this.lastControl.type = "Q";
				}
				this.last.x = args[args.length - 2];
				this.last.y = args[args.length - 1];
			},
			_qSmoothCurveToR : function(result, action, args) {
				for (var i = 0; i < args.length; i += 2) {
					var valid = this.lastControl.type == "Q";
					result.push("quadraticCurveTo", [
									this.lastControl.x = valid
											? 2 * this.last.x
													- this.lastControl.x
											: this.last.x,
									this.lastControl.y = valid
											? 2 * this.last.y
													- this.lastControl.y
											: this.last.y,
									this.last.x + args[i],
									this.last.y + args[i + 1]]);
					this.lastControl.type = "Q";
					this.last.x += args[i];
					this.last.y += args[i + 1];
				}
			},
			_arcTo : function(result, action, args) {
				var relative = action == "a";
				for (var i = 0; i < args.length; i += 7) {
					var x1 = args[i + 5], y1 = args[i + 6];
					if (relative) {
						x1 += this.last.x;
						y1 += this.last.y;
					}
					var arcs = ga.arcAsBezier(this.last, args[i], args[i + 1],
							args[i + 2], args[i + 3] ? 1 : 0, args[i + 4]
									? 1
									: 0, x1, y1);
					dojo.forEach(arcs, function(p) {
								result.push("bezierCurveTo", p);
							});
					this.last.x = x1;
					this.last.y = y1;
				}
				this.lastControl = {};
			},
			_closePath : function(result, action, args) {
				result.push("closePath", []);
				this.lastControl = {};
			}
		});
		dojo.forEach(["moveTo", "lineTo", "hLineTo", "vLineTo", "curveTo",
						"smoothCurveTo", "qCurveTo", "qSmoothCurveTo", "arcTo",
						"closePath"], function(method) {
					modifyMethod(g.Path, method);
				});

		dojo.declare("dojox.gfx.TextPath", g.path.TextPath, {
					// summary: a text shape (Canvas)
					_renderShape : function(/* Object */ctx) {
						var s = this.shape;
						// nothing for the moment
					}
				});

		dojo.declare("dojox.gfx.Surface", gs.Surface, {
					// summary: a surface object to be used for drawings
					// (Canvas)
					constructor : function() {
						gs.Container._init.call(this);
						this.pendingImageCount = 0;
						this.makeDirty();
					},
					setDimensions : function(width, height) {
						// summary: sets the width and height of the rawNode
						// width: String: width of surface, e.g., "100px"
						// height: String: height of surface, e.g., "100px"
						this.width = g.normalizedLength(width); // in pixels
						this.height = g.normalizedLength(height); // in pixels
						if (!this.rawNode)
							return this;
						this.rawNode.width = width;
						this.rawNode.height = height;
						this.makeDirty();
						return this; // self
					},
					getDimensions : function() {
						// summary: returns an object with properties "width"
						// and "height"
						return this.rawNode ? {
							width : this.rawNode.width,
							height : this.rawNode.height
						} : null; // Object
					},
					render : function() {
						// summary: render the all shapes
						if (this.pendingImageCount) {
							return;
						}
						var ctx = this.rawNode.getContext("2d");
						ctx.save();
						ctx.clearRect(0, 0, this.rawNode.width,
								this.rawNode.height);
						for (var i = 0; i < this.children.length; ++i) {
							this.children[i].render(ctx);
						}
						ctx.restore();
						if ("pendingRender" in this) {
							clearTimeout(this.pendingRender);
							delete this.pendingRender;
						}
					},
					makeDirty : function() {
						// summary: internal method, which is called when we may
						// need to redraw
						if (!this.pendingImagesCount
								&& !("pendingRender" in this)) {
							this.pendingRender = setTimeout(dojo.hitch(this,
											this.render), 0);
						}
					},
					downloadImage : function(img, url) {
						// summary:
						// internal method, which starts an image download and
						// renders, when it is ready
						// img: Image:
						// the image object
						// url: String:
						// the url of the image
						var handler = dojo.hitch(this, this.onImageLoad);
						if (!this.pendingImageCount++
								&& "pendingRender" in this) {
							clearTimeout(this.pendingRender);
							delete this.pendingRender;
						}
						img.onload = handler;
						img.onerror = handler;
						img.onabort = handler;
						img.src = url;
					},
					onImageLoad : function() {
						if (!--this.pendingImageCount) {
							this.render();
						}
					},

					// events are not implemented
					getEventSource : function() {
						return null;
					},
					connect : function() {
					},
					disconnect : function() {
					}
				});

		g.createSurface = function(parentNode, width, height) {
			// summary: creates a surface (Canvas)
			// parentNode: Node: a parent node
			// width: String: width of surface, e.g., "100px"
			// height: String: height of surface, e.g., "100px"

			if (!width) {
				width = "100%";
			}
			if (!height) {
				height = "100%";
			}
			var s = new g.Surface(), p = dojo.byId(parentNode), c = p.ownerDocument
					.createElement("canvas");
			c.width = width;
			c.height = height;
			p.appendChild(c);
			s.rawNode = c;
			s.surface = s;
			return s; // dojox.gfx.Surface
		};

		// Extenders

		var C = gs.Container, Container = {
			add : function(shape) {
				this.surface.makeDirty();
				return C.add.apply(this, arguments);
			},
			remove : function(shape, silently) {
				this.surface.makeDirty();
				return C.remove.apply(this, arguments);
			},
			clear : function() {
				this.surface.makeDirty();
				return C.clear.apply(this, arguments);
			},
			_moveChildToFront : function(shape) {
				this.surface.makeDirty();
				return C._moveChildToFront.apply(this, arguments);
			},
			_moveChildToBack : function(shape) {
				this.surface.makeDirty();
				return C._moveChildToBack.apply(this, arguments);
			}
		};

		dojo.mixin(gs.Creator, {
					// summary: Canvas shape creators
					createObject : function(shapeType, rawShape) {
						// summary: creates an instance of the passed shapeType
						// class
						// shapeType: Function: a class constructor to create an
						// instance of
						// rawShape: Object: properties to be passed in to the
						// classes "setShape" method
						// overrideSize: Boolean: set the size explicitly, if
						// true
						var shape = new shapeType();
						shape.surface = this.surface;
						shape.setShape(rawShape);
						this.add(shape);
						return shape; // dojox.gfx.Shape
					}
				});

		dojo.extend(g.Group, Container);
		dojo.extend(g.Group, gs.Creator);

		dojo.extend(g.Surface, Container);
		dojo.extend(g.Surface, gs.Creator);
	})();

}