Skip to content

Canvas.js

Danny Garcia edited this page Sep 29, 2012 · 3 revisions

The purpose of Canvas.js is as follows:

  1. Quick and flexible method for embedding a <canvas> node.
  2. Easy access to getting / setting the canvas context.
  3. Help with small things like window resizing and pixel ratios.

Options

context		[str]		-	Context type.
container	[dom]		-	<canvas> container.
width		[num/str]	-	Canvas width. "auto" fits to container.
height		[num/str]	-	Canvas height. "auto" fits to container.
resize		[bool]		-	Should the canvas width/height be reset when the window is resized?

Quick Start

HTML

<div id="canvas"></div>

JavaScript

// Standard
(function () {

	var cvs = new fil.Canvas();

	cvs.init({
		container : document.getElementById('canvas')
	});

	var ctx = cvs.context();
	// Do cool things with canvas here.

}());

// AMD
require(["Canvas"], function (Canvas) {

	var cvs = new fil.Canvas();

	cvs.init({
		container : document.getElementById('canvas')
	});

	var ctx = cvs.context();
	// Do cool things with canvas here.

});

Clone this wiki locally