1 files changed, 68 insertions, 0 deletions

diff --git a/html/lib/canvas/Canvas.js b/html/lib/canvas/Canvas.js
new file mode 100644
index 0000000..408047a
--- /dev/null
+++ b/html/lib/canvas/Canvas.js
@@ -0,0 +1,68 @@
+/**
+	_enyo.Canvas_ is a control that generates a <canvas> HTML tag. It may
+	contain other canvas components that are derived not from
+	<a href="#enyo.Control">enyo.Control</a>, but from 
+	<a href="#enyo.canvas.Control">enyo.canvas.Control</a>.  These aren't true
+	controls in the sense of being DOM elements; they are, rather, shapes drawn
+	into the canvas.
+*/
+enyo.kind({
+	name: "enyo.Canvas",
+	kind: enyo.Control,
+	tag: "canvas",
+	attributes: {
+		//* Width of the canvas element
+		width: 500,
+		//* Height of the canvas element
+		height: 500
+	},
+	defaultKind: "enyo.canvas.Control",
+	//* @protected
+	generateInnerHtml: function() {
+		return '';
+	},
+	teardownChildren: function() {
+	},
+	rendered: function() {
+		this.renderChildren();
+	},
+	/*
+		addChild and removeChild of Control kind assumes children are Controls.
+		CanvasControls are not, so we use UiComponent's version, the superkind of Control
+	*/
+	addChild: function() {
+		enyo.UiComponent.prototype.addChild.apply(this, arguments);
+	},
+	removeChild: function() {
+		enyo.UiComponent.prototype.removeChild.apply(this, arguments);
+	},
+	renderChildren: function(inContext) {
+		var ctx = inContext;
+		var canvas = this.hasNode();
+		if (!ctx) {
+			if (canvas.getContext) {
+				ctx = canvas.getContext('2d');
+			}
+		}
+		if (ctx) {
+			for (var i=0, c; c=this.children[i]; i++) {
+				c.render(ctx);
+			}
+		}
+	},
+	//* @public
+	/**
+		Refreshes the canvas context, clears existing drawings, and redraws all
+		of the children.
+	*/
+	update: function() {
+		var canvas = this.hasNode();
+		if (canvas.getContext) {
+			var ctx = canvas.getContext('2d');
+			var b = this.getBounds();
+			// clear canvas
+			ctx.clearRect(0, 0, b.width, b.height);
+			this.renderChildren(ctx);
+		}
+	}
+});