rita,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
function fitWindow() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
fitWindow()
var x = 40;
var y = 1;
var x1 = 90;
var y1 = 1;
var x2 = 140;
var y2 = 1;
var j = 0;
setTimeout(function green() {
x = x + 20;
y = y + 50;
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(x, y, 9, 0, Math.PI * 2);
ctx.fill();
if (x < 500) setTimeout(green, ++j * 100);
}, 10);
var l = 0;
setTimeout(function blue() {
x1 = x1 + 30;
y1 = y1 + 50;
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(x1, y1, 9, 0, Math.PI * 2);
ctx.fill();
if (x < 500) setTimeout(blue, ++l * 100);
}, 10);
var k = 0;
var jj = 0;
var ii = 0;
setTimeout(function orange() {
x2 = x2 + 40;
y2 = y2 + 50;
ctx.beginPath();
ctx.arc((23 + ii * 32) + jj * 74, 23 + ii * 54, 15, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.closePath();
ctx.fill();
if (++ii == 7) {
++jj;
ii = 0;
}
if (jj < 3) setTimeout(orange, ++k * 30);
}, 10);
</script>
</body>
</html>