SirPepe/CanvasQuery.js

## 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;

})();

## 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>