How can I execute different animations one by one within a HTML5 Canvas context

Question

I am working to create an animation which draws a canvas like "O - O" shape. The animation should first animate to draw the circle on the left, then the right circle and finally the connection in between.

I am able to draw a circle but I would like to know how can I draw the three elements one by one instead of drawing three of them together.

Psuedo-code:

window.onload = draw;

function draw(){
drawcircle();
}

function drawcircle(){
draw part of circle
if( finish drawing){
clearTimeout
}
else{
setTimeout(drawcircle());
}

However, if I run another drawcircle function after first in the draw() function. Both circles are drawn at the same time instead of one by one. Is there any method to draw each elements one by one? Thanks very much

Answer 1

What you propabably really want to be using is requestAnimationFrame. You can then completely leave out the setTimeout. http://paulirish.com/2011/requestanimationframe-for-smart-animating/ is a great blog post that'll help you get started.

Answer 2

What you want are callbacks :

Circle(ctx, 50, 50, 25, 1000, function () {       // animate drawing a circle
  Circle(ctx, 150, 50, 25, 1000, function () {    // then animate drawing a circle
    Line(ctx, 75, 50, 125, 50, 1000, function(){  // then animate drawing a line
      alert('done');
    });
  });
});

Here's a simple implementation of animated drawings of circles and lines:

function Circle(context, x, y, radius, dur, callback) {
  var start = new Date().getTime(),
      end = start + dur,
      cur = 0;

  (function draw() {
    var now = new Date().getTime(),
        next = 2 * Math.PI * (now-start)/dur;

    ctx.beginPath();
    ctx.arc(x, y, radius, cur, next);
    cur = Math.floor(next*100)/100; // helps to prevent gaps
    ctx.stroke();

    if (cur < 2 * Math.PI) requestAnimationFrame(draw);  // use a shim where applicable
    else if (typeof callback === "function") callback();
  })();
}

function Line(context, x1, y1, x2, y2, dur, callback) {
  var start = new Date().getTime(),
      end = start + dur,
      dis = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
      ang = Math.atan2(y2-y1, x2-x1),
      cur = 0;

  (function draw() {
    var now = new Date().getTime(),
        next = Math.min(dis * (now-start)/dur, dis);

    ctx.beginPath();
    ctx.moveTo(x1 + Math.cos(ang) * cur, y1 + Math.sin(ang) * cur);
    ctx.lineTo(x1 + Math.cos(ang) * next, y1 + Math.sin(ang) * next);
    cur = next;
    ctx.closePath();
    ctx.stroke();

    if (cur < dis) requestAnimationFrame(draw);  // use a shim where applicable.
    else if (typeof callback === "function") callback();
  })();
}

And here's a working (webkit only) demo: http://jsfiddle.net/QSAyw/3/