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