Lightweight HTML5 Canvas Library

View the Project on GitHub vladakilov/imagine

Lightweight HTML5 Canvas Library Build Status

How to build

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

  1. npm install -g grunt-cli
  2. npm install -g bower
  3. npm install
  4. bower install
  5. Build - grunt (To view all grunt tasks, open Gruntfile.js)

Example Use

Multiple canvas objects, text object has event listeners.

Code for this example -

Add rectangle to canvas

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

Add circle to canvas

var canvas = new imagine.Canvas('circle-canvas');
var circle = new imagine.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
    }, 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'