Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Makes simple canvas animations easier

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 examples
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 canvimator.js
Octocat-spinner-32 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.