HTML5 Animation - How to do animation in canvas

Download Demo Javascript (2.01 kb)

As newer versions of browsers are coming out recently, the rendering improvements are definitely providing a punch to how HTML5 Canvas element can be used for some real cool games and animation development. In this post, I will focus on a very simple question that I get from lot of readers of my blog and my clients, How do you do animation in HTML5 Canvas?.

The basic concept behind animation always remain the same. If I can draw frames of an object at faster speed then it simulates behaviour of animated object(s). Therefore if I can draw different states or frames object(s) on HTML5 canvas at fast speed then I can accomplish animation. To accomplish this here are fundamental steps you will need to perform in a cycle.

  1. Draw certain state of an object on canvas
  2. Changes state of the object. This change in state could be change of position or some other transformation applied to same object.
  3. After certain period of time, clear canvas (whole canvas or part of it, depending on area that needs to be simulated).
  4. Draw new state of the object

If you keep repeating this cycle then you have your animation. Very simple eh! Well only hard part is calculating new state of of the object that needs to be displayed for each frame tick. I will talk about these states in more details in subsequent posts. For this post, I am going to show some code for very simple animation. In this animation, a disc moves from one side of the canvas to other and then back. This process is repeated till you want to stop. Following code shows how I managed to accomplish this animation.

html5 animation demo

function rollThisCircle(canvasId) {
 var frameRate = 36;
 var radius = 40;
 var deltaX = 1;
 var tickerInterval = null;
 var direction = 1;
 var thisCanvas = new Canvas(canvasId);
 var graphics = new NetFour.Graphics(thisCanvas);

 var center = new NetFour.Point(radius, thisCanvas.height / 2);
 var perimeterPoint = new NetFour.Point(center.x + radius, center.y);
 
 paint();

 function paint() {
   if (tickerInterval) {
     clearInterval(tickerInterval);
   }
   graphics.clearCanvas();
   graphics.saveContext();
   graphics.drawDisc(center, radius, true, { fillColor: '#faf',borderWidth:2,borderColor:'#e2f' });
   graphics.restoreContext();

   tickerInterval = setInterval(frameTick, frameRate);
 }

 function frameTick() {
    center.x += deltaX * direction;
    perimeterPoint.x = center.x + radius * direction;
    if (!thisCanvas.rectangle.containsPoint(perimeterPoint)) {
      direction = -direction;
    }
   paint();
 }
};

There are lot of function calls that are from my custom graphics library implementation. At the heart of animation implementation are two functions paint and frameTick. As you can see that in pain function, I cleared the canvas and did disc draw. And then set the interval to call frameTick to call after 36ms. In frameTick I moved the center of the disc by 1 and called paint again.

Source Javascript Code For Animation

I have attached javascript files that I used for animation. The zip file contains following files.

  • NetFour.js
  • NetFourRender.js
  • NetFourRollCircle.js

Demo Of HTML5 Animation

You can click on following link to visit the demo site where you can see this bouncing disc demo in action.

HTML5 Animation - Bouncing Ball
blog comments powered by Disqus
Search
Share

Smart Phones Poll

What smart phone do you currently own?





Show Results

Month List