/**
* @class CanvasRenderer
* @memberof SQR
*
* @description Part of a minimal Canvas 2d rendering engine. The paremeter is a canvas element or a selector (ex. #gl-canvas)
* can be passed to this function. If omitted a new canvas element will be created
* and it will be available as the canvas property of the object.
*
* @param {HTMLCanvasElement} the underlying canvas element
* @property {HTMLCanvasElement} the underlying canvas element
*/
SQR.CanvasRenderer = function(canvas) {
var r = {}, clearColor = null;
var BADCTX = "> SQR.Context - Invalid canvas reference.";
if(!canvas) canvas = document.createElement('canvas');
if(!(canvas instanceof HTMLElement)) canvas = document.querySelector(canvas);
if(!canvas.getContext) throw BADCTX;
var ctx = canvas.getContext('2d');
// Dash line shim
if(!ctx.setLineDash) ctx.setLineDash = function() {};
r.canvas = canvas;
r.context = ctx;
/**
* Set the size of the underlying canvas element.
* @method setSize
* @memberof SQR.CanvasRenderer.prototype
* @param {Number} w - the width of the canvas
* @param {Number} h - the height of the canvas
* @param {Number} r - the resolution (aka pixel ratio)
*/
r.setSize = function(w, h, rs) {
rs = rs|| 1;
canvas.width = w * rs;
canvas.height = h * rs;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
return r;
}
r.setClearColor = function(c) {
clearColor = c;
return r;
}
/**
* Render the transform tree
* @method render
* @memberof SQR.CanvasRenderer.prototype
* @param {SQR.Transform2d} root - the root transform to render
*/
r.render = function(root) {
if(clearColor) {
if(clearColor.indexOf('rgba') > -1) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.fillStyle = clearColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
if(root) root.draw(ctx);
}
return r;
}