Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Makes simple canvas animations easier
JavaScript
branch: master

small performance boosts... yeah.

latest commit 72d3e5ee70
Sankho Mallik authored
Failed to load latest commit information.
examples
.gitignore
README.md
canvimator.js
easing.js

README.md

Canvimator

Canvimator is a JS library to make animating objects in an HTML5 canvas tag a bit easier.

Written by Sankho Mallik, sankho [dot] mallik [at] gmail [dot] com

Usage

I'd check the examples folder, if I were you.

But here's the skinny. Let's say you have an HTML document with a Canvas tag with an ID of.... "canvas." Here's how you would add a circle, and then animate it's position and color, twice.

var canv = new CANVIMATOR.init('canvas');

var circle = canv.addObject({
    type    : 'circle',
    x       : 30,
    y       : 30,
    radius  : 10,
    color   : '#fff'
});

circle.animate({
    x       : 100,
    y       : 100,
    color   : 'rgb(232,33,33)'
},1500,function() {
    circle.animate({
        x    : 100,
        y    : 10,
        color: '#333'
    })
});

This is very much under development, so if you wanna use it, please refer to the comments in the code.

Supported object types

The "type" parameter in addObject supports the following object types: circle, square, and rectangle.

See the object literal defined as CANVIMATOR.objects for more info.

Adding custom object types

Fair warning, I'd refer to addObject.html in the examples. But you can add your own objects like so:

CANVIMATOR.objects.newObject = function(obj,ctx) {
    // iterate over the obj variable & context of the canvas
}
Something went wrong with that request. Please try again.