A CanvasAnimation can be used to quickly animate onto a CanvasObject using a sprite sheet.

The sprite sheet image used in this example is 240px x 112px. Below is a blown up image of the sprite sheet so you can see how it is used.
The image gets loaded using the standard Image Class and a CanvasObject is set up for drawing to an html canvas.
A CanvasAnimation runs animations on a given CanvasObject.
The CanvasAnimation will draw from the image onto the CanvasObject as defined by its animations.

Each animation is defined as an Array of the x,y index values of each frame of the animation.
In this example we will use the left facing orange, so the x,y values we pass define the x and y index of each frame of the left facing oraange image.
The first frame has a x index value of 0, and y index value of 2, the begining frames have been marked in the image below to help you visualize what is happening.


To run the animation first we change to it with the currentAnimation property then we call the animate method.
To display the animation we call the blit method.

	(function() {
 
		var img = new Image();
		
		var ca;
		//The CanvasObject references the canvas to draw on and has methods for drawing to the canvas.
		var co = new tabageos.CanvasObject(document.getElementById("canv"),240,240);
		
		img.onload = function(e) {
			
			//CanvasAnimation defines and runs animations on a CanvasObject.
			ca = new tabageos.CanvasAnimation(img,co,null,120,120,16,16);
			ca.defineAnimation("orange", [0,2,1,2,2,2,3,2,4,2,5,2]);
			ca.currentAnimation = "orange";
			
			window.requestAnimationFrame(loop);
		};
		
		img.src = "someEnemies.png";
		
		function loop(ts) {
			
			ca.animate(.5);
			ca.blit();
			
			window.requestAnimationFrame(loop);
			
		}
	})();