canDo.js

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:

• Ai->Canvas (size varies) - This Adobe Illustrator plug-in allows you to build an animation in Illustrator and export to Canvas. It was built by @tommylee from Microsoft.
• fabric.js (~124kb compressed) - "Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas (and canvas-to-SVG) parser." This one was built by @kangax .
• paper.js (~130kb compressed) - "[paper.js] offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Credit @juerglehni and @jonathanpuckey for this.
• cake.js (~100kb compressed) - "CAKE is a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off."
• CAAT (> 200kb compressed) - "CAAT is a director-based Scene graph manager. It is able to render using Canvas, WebGL and CSS w/o making changes to the developments that sit on top of it."

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.
</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 () {demo.play({speed:1});},
        mouseout: function () {demo.play({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.identity();
	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}]);
	
	drawJSBox(this);
	this.shadowOffsetX = 0;
	this.shadowOffsetY = 0;
	this.shadowBlur = 0;
	drawJ(this);
	drawS(this);
}

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.