View on GitHub


A canvas wrapper for lightweight animations. Ideal for simple animated UI elements in the 2d rendering context.

Download this project as a .zip file Download this project as a tar.gz file

Hello World JS Logo

canDo.js proxies the methods of the HTML Canvas 2D Context and allows you to add keyframes to the properties you pass in. canDo also gives you easing functions, playback control, image management and even some basic event handling.

You are still free to use the non-proxied built-in canvas functions when appropriate.

canDo.js is framework agnostic and pretty darn small (< 3kb compressed and gzipped).

canDo.js is not a scene graph manager, a game engine, or a drawing tool. If canDo.js doesn't solve your needs, check out some of these Canvas based projects:

Building a canDo.js animation

First you need a canvas element

<canvas id="demo" width="400" height="360">
	This text is displayed if your browser does not support HTML5 Canvas.

Next you wrap the element's 2D rendering context with canDo

var demo = CanDo('demo', {
    frameRate: 60,
    duration: 2000,
    easing: 'easeInOutQuad',
    events: {
        mouseover: function () {{speed:1});},
        mouseout: function () {{speed:-1});}

When you do that you need to pass in some parameters, not least of which is your paint () function. Here we're setting it after the fact

demo.paint = function() {
	this.clearRect(0, 0, 400, 360);
	this.translate(160, 160);
	this.canDo('rotate', [{params: [0],cuePoint: 0},{params: [44],cuePoint: 1}]);
	this.translate(-105, -105);
	this.canDo('scale', [{params: [0.1, 0.1],cuePoint: 0},{params: [1.0, 1.0],cuePoint: 1}]);
	this.canSet('shadowColor', [{params: ['rgba(0, 0, 0, 0.7)'], cuePoint:0},{params:['rgba(0,0,0,0.1)'], cuePoint: 1}]);
	this.canSet('shadowOffsetX', [{params: [3],cuePoint: 0},{params: [90],cuePoint: 1}]);
	this.canSet('shadowOffsetY', [{params: [3],cuePoint: 0},{params: [50],cuePoint: 1}]);
	this.canSet('shadowBlur', [{params: [3],cuePoint: 0},{params: [20],cuePoint: 1}]);
	this.shadowOffsetX = 0;
	this.shadowOffsetY = 0;
	this.shadowBlur = 0;

And there you have it. You can see many more samples on the from the list of methods and properties that can be wrapped.

canDo.js is distributed under the MIT License.