Facade.js

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();

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

    this.addToStage(rect);

});

Basic Shapes

Rectangle

Play with this code live at http://play.facadejs.com/#basic/rect.js.

(function () {

    var stage = new Facade(document.querySelector('#rect_demo')),
        rect = new Facade.Rect({
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 200,
            height: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(rect);

    });

}());

Line

Play with this code live at http://play.facadejs.com/#basic/line.js.

(function () {

    var stage = new Facade(document.querySelector('#line_demo')),
        line = new Facade.Line({
            x: stage.width() / 2,
            y: stage.height() / 2,
            x2: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(line);

    });

}());

Circle

Play with this code live at http://play.facadejs.com/#basic/circle.js.

(function () {

    var stage = new Facade(document.querySelector('#circle_demo')),
        circle = new Facade.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 100,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(circle);

    });

}());

Text

Play with this code live at http://play.facadejs.com/#basic/text.js.

(function () {

    var stage = new Facade(document.querySelector('#text_demo')),
        text = new Facade.Text('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', {
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 300,
            fontSize: 30,
            anchor: 'center',
            textAlignment: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(text);

    });

}());

Image

Play with this code live at http://play.facadejs.com/#basic/image.js.

(function () {

    var stage = new Facade(document.querySelector('#image_demo')),
        image = new Facade.Image('images/scott-pilgrim.png', {
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 36,
            scale: 5,
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.context.webkitImageSmoothingEnabled = false;

    stage.draw(function () {

        this.clear();

        this.addToStage(image);

    });

}());