Html 5 Canvas And Moving Objects

I am having a look at HTML 5 canvas today and I would like to move 3 circles on the canvas. From what I have read so far I need to redraw the circles each time (every 60 milisecond

Solution 1:

Here's a brief description of how to move circles on html canvas:

A Demo: http://jsfiddle.net/m1erickson/JQQP9/

Create an object that defines each circle:

var circle1={
    x:50,
    y:50,
    radius:25,
}

var circle2={
    x:100,
    y:100,
    radius:25,
}

Add these circle objects to an array:

var circles=[];

circles.push(circle1);
circles.push(circle2);

Make a function that will draw all circles in the array.

This function clears the canvas and redraws all circles at their currently assigned x,y:

functiondraw(){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        context.beginPath();
        context.arc(c.x,c.y,c.radius,0,Math.PI*2);
        context.closePath();
        context.fill();
    }
}

To "move" the circles you change the x,y properties of a circle and redraw the circles:

circles[0].x+=1;
circles[1].y+=1;
draw();

To animate the movements, you might consider checking out requestAnimationFrame which efficiently creates an animation loop. IMHO, it is the preferred looping method for all but simple animations.

var frameCount=0;

animate();

function animate(){
    if(frameCount<160){requestAnimationFrame(animate);}
    circles[0].x+=1;
    circles[1].y+=1;
    draw();
    frameCount++;
}

Solution 2:

The usual way to do this would be to use window.requestAnimationFrame. This will essentially let you redraw the canvas every frame that the browser checks if it needs to redraw the screen. Below is my modification of your draw method and initialization code.

    function draw() {
      // schedule another draw for the next animation frame by calling // requestAnimationFrame with itself as a callback
      requestAnimationFrame(draw);

      // clear the canvas (otherwise your circles will leave trails)
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

      // calc a new position for the circles based on the current timevarnow= +newDate();
      varhalfWidth= canvas.width / 2; // (waste to recheck each frame)varmaxX= canvas.width - radius; // to avoid drawing the circles off screenvarspaceBetween= canvas.width / 3;
      varx1= (halfWidth + now) % maxX;
      varx2= (x1 + spaceBetween) % maxX;
      varx3= (x2 + spaceBetween) % maxX;

      vary= canvas.height / 2;
      varspaceBetween= canvas.width / 3;
      renderCircle(context, x1, y, radius, 'yellow');
      renderCircle(context, x2, y, radius, 'blue');
      renderCircle(context, x3, y, radius, 'red');
    }

    varcanvas= document.getElementById('ball-canvas');
    varcontext= canvas.getContext('2d')
    varradius=50;

    // start the animation
    draw();