SirPepe · August 2, 2010 19:06
diff --git a/CanvasQuery.js b/CanvasQuery.js
 // Init boilerplate
 function CanvasQuery(c){
 	"use strict";
 	if(!(this instanceof CanvasQuery)) return new CanvasQuery(c);
 	if(typeof c == "string"){
 		var canvas = document.getElementById(c);
 		if(!canvas) throw new Error("Canvas element #" + c + " doesn't exist");
 	}
 	if(typeof canvas == "undefined"){
 		if(c.getContext) canvas = c;
 		else throw new Error("Object " + c + " is not a canvas element");
 	}
 	this.context = canvas.getContext("2d");
 };


 CanvasQuery.prototype = (function(){
 	"use strict";

 	// Shim for requestAnimationFrame
 	var reqAniFra = (function(){
 		return window.requestAnimationFrame ||
 			window.webkitRequestAnimationFrame ||
 			window.mozRequestAnimationFrame ||
 			window.oRequestAnimationFrame ||
 			window.msRequestAnimationFrame ||
 			function(callback){
 				setTimeout(callback, 1000 / 60);
 			}
 	})();

 	// Turns degrees into radians
 	var toRad = function(deg){
 		return deg * Math.PI / 180;
 	};

 	// List of unchanged chainable methods
 	var methods = ["arcTo", "bezierCurveTo", "clearRect", "clip", "closePath", "drawImage",
 	               "fill", "fillRect", "fillText", "lineTo", "moveTo", "putImageData",
 	               "quadraticCurveTo", "rect", "restore", "save", "scale", "setTransform",
 	               "stroke", "strokeRect", "strokeText", "transform", "translate"];

 	var api    = {

 		// beginPath() now accepts starting coordinates
 		beginPath: function(x, y){
 			this.context.beginPath();
 			if(arguments.length == 2) this.moveTo(x, y);
 			return this;
 		},

 		// Alias for moveTo()
 		from: function(x, y){
 			return this.moveTo(x, y);
 		},

 		// rotate() now accepts degrees
 		rotate: function(deg){
 			this.context.rotate(toRad(deg));
 			return this;
 		},

 		// arc() now accepts degrees
 		arc: function(x, y, r, sdeg, edeg, cw){
 			this.context.arc(x, y, r, toRad(sdeg), toRad(edeg), cw);
 			return this;
 		},

 		// Shorter than arc()
 		circle: function(x, y, r){
 			return this.arc(x, y, r, 0, 360, false);
 		},

 		// Generic setter
 		set: function(property, value){
 			if(typeof property == "string"){
 				this.context[property] = value;
 			}
 			else {
 				for(var prop in property){
 					if(property.hasOwnProperty(prop)){
 						this.context[prop] = property[prop];
 					}
 				}
 			}
 			return this;
 		},

 		// Generic getter
 		get: function(property){
 			return this.context[property];
 		},

 		// Returns the canvas element
 		canvas: function(){
 			return this.context.canvas;
 		},

 		// Animation wrapper
 		animate: function(callback){
 			reqAniFra(callback.bind(this));
 			return this;
 		}

 	};

 	// Chain all remaining methods
 	for(var i = 0; i < methods.length; i++){
 		var method = methods[i];
 		api[method] = (function(method){
 			return function(){
 				var args = Array.prototype.slice.call(arguments);
 				return this.context[method].apply(this.context, args) || this;
 			}
 		})(method);
 	}

 	return api;

 })();
diff --git a/test.html b/test.html
 <!doctype html>

 <canvas id="test" width="500" height="500" style="border:1px solid black;"></canvas>

 <script src="CanvasQuery.js"></script>

 <script>
 var context = CanvasQuery('test');                                                       // Get context
 context.translate(250, 250).set({'lineWidth': 4, 'strokeStyle': '#CC0000'});             // Configure context
 var draw = function(){                                                                   // Animation callback
 	this.clearRect(-250, -250, 500, 500).rotate(this.toRad(1));                          // Clear canvas and rotate
 	this.moveTo(0, -50).lineTo(0, 50).closePath();                                       // Body
 	this.lineTo(-50, -100).moveTo(0, -50).lineTo(50, -100).moveTo(-50, 0).lineTo(50, 0); // Arms and legs
 	this.stroke();                                                                       // Draw lines
 	this.beginPath().arc(0, 75, 25, this.toRad(0), this.toRad(360), false).stroke();     // Head
 	this.animate(draw);                                                                  // Render next frame
 }
 context.animate(draw);                                                                   // Render frist frame
 </script>
	// Init boilerplate
	function CanvasQuery(c){
	"use strict";
	if(!(this instanceof CanvasQuery)) return new CanvasQuery(c);
	if(typeof c == "string"){
	var canvas = document.getElementById(c);
	if(!canvas) throw new Error("Canvas element #" + c + " doesn't exist");
	}
	if(typeof canvas == "undefined"){
	if(c.getContext) canvas = c;
	else throw new Error("Object " + c + " is not a canvas element");
	}
	this.context = canvas.getContext("2d");
	};


	CanvasQuery.prototype = (function(){
	"use strict";

	// Shim for requestAnimationFrame
	var reqAniFra = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback){
	setTimeout(callback, 1000 / 60);
	}
	})();

	// Turns degrees into radians
	var toRad = function(deg){
	return deg * Math.PI / 180;
	};

	// List of unchanged chainable methods
	var methods = ["arcTo", "bezierCurveTo", "clearRect", "clip", "closePath", "drawImage",
	"fill", "fillRect", "fillText", "lineTo", "moveTo", "putImageData",
	"quadraticCurveTo", "rect", "restore", "save", "scale", "setTransform",
	"stroke", "strokeRect", "strokeText", "transform", "translate"];

	var api = {

	// beginPath() now accepts starting coordinates
	beginPath: function(x, y){
	this.context.beginPath();
	if(arguments.length == 2) this.moveTo(x, y);
	return this;
	},

	// Alias for moveTo()
	from: function(x, y){
	return this.moveTo(x, y);
	},

	// rotate() now accepts degrees
	rotate: function(deg){
	this.context.rotate(toRad(deg));
	return this;
	},

	// arc() now accepts degrees
	arc: function(x, y, r, sdeg, edeg, cw){
	this.context.arc(x, y, r, toRad(sdeg), toRad(edeg), cw);
	return this;
	},

	// Shorter than arc()
	circle: function(x, y, r){
	return this.arc(x, y, r, 0, 360, false);
	},

	// Generic setter
	set: function(property, value){
	if(typeof property == "string"){
	this.context[property] = value;
	}
	else {
	for(var prop in property){
	if(property.hasOwnProperty(prop)){
	this.context[prop] = property[prop];
	}
	}
	}
	return this;
	},

	// Generic getter
	get: function(property){
	return this.context[property];
	},

	// Returns the canvas element
	canvas: function(){
	return this.context.canvas;
	},

	// Animation wrapper
	animate: function(callback){
	reqAniFra(callback.bind(this));
	return this;
	}

	};

	// Chain all remaining methods
	for(var i = 0; i < methods.length; i++){
	var method = methods[i];
	api[method] = (function(method){
	return function(){
	var args = Array.prototype.slice.call(arguments);
	return this.context[method].apply(this.context, args) \|\| this;
	}
	})(method);
	}

	return api;

	})();
	<!doctype html>

	<canvas id="test" width="500" height="500" style="border:1px solid black;"></canvas>

	<script src="CanvasQuery.js"></script>

	<script>
	var context = CanvasQuery('test'); // Get context
	context.translate(250, 250).set({'lineWidth': 4, 'strokeStyle': '#CC0000'}); // Configure context
	var draw = function(){ // Animation callback
	this.clearRect(-250, -250, 500, 500).rotate(this.toRad(1)); // Clear canvas and rotate
	this.moveTo(0, -50).lineTo(0, 50).closePath(); // Body
	this.lineTo(-50, -100).moveTo(0, -50).lineTo(50, -100).moveTo(-50, 0).lineTo(50, 0); // Arms and legs
	this.stroke(); // Draw lines
	this.beginPath().arc(0, 75, 25, this.toRad(0), this.toRad(360), false).stroke(); // Head
	this.animate(draw); // Render next frame
	}
	context.animate(draw); // Render frist frame
	</script>