JavaScript animation with multiple setTimeout

JavaScript animation with multiple setTimeout

i am trying to animate 3 different shapes with setTimeout it seems like
only 2 second shape has some sort of animation, my question is how can i
use multiple setTimeout to animate 3 different shapes also is there a
better way to do this
window.onload = draw;
var x = 5;
var y = 5;
radius = 50;
var x2 = 50;
var y2 = 120;
var x3 = 53;
var y3 = 230;
function draw(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.save();
context.clearRect(0,0,720,550);
//drawing a rectangle
context.fillStyle = "rgba(93,119,188,237)";
context.rect(x, y, 50, 50);
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'yellow';
context.stroke();
x2 += 1;
//darwong a circle
context.beginPath();
context.fillStyle = "#0000ff";
//Draw a circle of radius 20 at the current coordinates on the canvas.
context.arc(x2, y2, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
x2 += 1;
//drawing a second circle
context.beginPath();
context.fillStyle = 'green';
context.arc(x3, y3, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
context.lineWidth = 5;//border around the circle
context.strokeStyle = 'red';
context.stroke();
x3 += 1;
var loopTimer = setTimeout('draw('+x+','+y+')',20);
var loopTimer2 = setTimeout('draw('+x2+','+y2+')',20);
var loopTimer3 = setTimeout('draw('+x3+','+y3+')',20);
}