Lightweight HTML5 Canvas Library

Add objects & images to canvas.
Drag & drop canvas elements including text, shapes, images and more.
Event handling for canvas elements.
Under 15KB minified, 4KB gzip.

How to build

You will need node installed as a development dependency. See node's site for help with that.

npm install -g grunt-cli
npm install -g bower
npm install
bower install
Build - grunt (To view all grunt tasks, open Gruntfile.js)

Example Use

Multiple canvas objects, text object has event listeners.

Code for this example - http://codepen.io/vladakilov/pen/BJehc

Add rectangle to canvas

var canvas = new imagine.Canvas('rect-canvas');
var rect = new imagine.Rectangle();
canvas.add(rect);

Add circle to canvas

var canvas = new imagine.Canvas('circle-canvas');
var circle = new imagine.Circle();
canvas.add(circle);

Add image to canvas and center

var canvas = new imagine.Canvas('image-canvas');
var imageObj = new Image();
var imageSize = 128;
    imageObj.src = 'images/html5_logo.png';
    imageObj.addEventListener('load', function() {
        var img = new imagine.Image(imageObj, {
            left: canvas.canvas.width/2 - imageSize/2,
            top: canvas.canvas.height/2 - imageSize/2,
            width: imageSize,
            height: imageSize
        });
        canvas.add(img);
    }, false);

Add text to canvas

var canvas = new imagine.Canvas('text-canvas');
var text = new imagine.Text({
    fontSize: 32,
    font: 'Helvetica Neue',
    left: 150,
    top: 150,
    text: 'Text Object',
    fill: 'blue'
});
canvas.add(text);