Today lets see how we can do simple animation using Canvas.

Here we draw a circle and move it from starting point of x-axis to the end of the canvas.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Moving Circle Code
myScript.js

context.beginPath();
context.fillStyle = "red";
context.arc(x++, context.canvas.height/2, r, 0, 2 * Math.PI);
context.fill();

Here I’m drawing a circle with a red fill and incrementing it’s x-axis value each time it is called.

JavaScript file: x-axis movement control
myScript.js

var r = 50;
var x = -r;
  
if( x >= context.canvas.width + r)
    x  = -r; 

Here the x-axis value is tracked each time and is set back to -50 ( minus radius of the circle ) once the circle moves out of the x-axis or the canvas width.

Simple Animation using Canvas: HTML5

JavaScript file: Full Free Source Code
myScript.js

window.onload = canvas;
 
function canvas()
{
 var myCanvas = document.getElementById("myCanvas");
 
 if( myCanvas && myCanvas.getContext("2d") ) 
 {
  var context         = myCanvas.getContext("2d");
  var r = 50;
  var x = -r;
  
  setInterval(function(){
   context.fillStyle   = "#000";
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
   
   context.beginPath();
   context.fillStyle   = "red";
   context.arc(x++, context.canvas.height/2, r, 0, 2 * Math.PI);
   context.fill();
   
   if( x >= context.canvas.width + r)
       x  = -r; 
  }, 10);
 }
}

Here we use the setInterval() method to iterate/loop through the anonymous function and each time the background of the canvas is set to black(#000 or #000000) by drawing a black rectangle across the entire canvas width and height. For every call the value of x increments by 1, hence the circle moves 1px away from its previous position, until it reaches the end of canvas – after which it is reset back to -r value.