Facade.js 0.3.0-beta

Drawing shapes, images and text in HTML5 canvas made easy.

Demos

Editable demos are available at http://play.facadejs.com/.

Documentation

The documentation for version 0.3.0-beta can be found at http://docs.facadejs.com/0.3.0-beta/.

Getting Started

First include the Facade.js script (15kb minified, 3kb gzipped):

<script src="facade.min.js"></script>

Then create a new Facade.js object using an existing canvas element or a unique ID.

var stage = new Facade(document.querySelector('canvas'));

var stage = new Facade('stage', 400, 300);

Then you can start creating and adding objects like rectangle, lines, circle, text and images.

var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.addToStage(rect);

To make an animation place all draw logic within an callback function using Facade.draw.

var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.draw(function () {

    this.clear();

    rect.setOptions({ x: '+=1' });

    this.addToStage(rect);

});

Install

Facade.js can be installed using bower:

$ bower install facade.js

or with npm:

$ npm install facade.js

Build

To build Facade.js first install dependencies.

$ npm install

Then run grunt.

$ grunt

More specifically if you would like to run each grunt command separately they are as follows:

$ grunt jslint # Runs jslint tests
$ grunt uglify # Uglifys facade.js and stores the result in facade.min.js
$ grunt shell:docs # Rebuild documentation
$ grunt shell:gzip # Gzip facade.min.js and stores the result in facade.min.js.gzip

Run Tests

Tests are built in casperjs and validates the values used to render entities on the canvas.

$ npm test

CDN

http://cdn.facadejs.com/0.3.0-beta/facade.min.js

Browser Support

Facade.js works in Chrome 10+, Safari 6+, Firefox 4+, Opera 15+, and Internet Explorer 10+. By way of an additional polyfill for requestAnimationFrame support can be added for Internet Explorer 9 and older versions of Safari, Firefox, and Opera.