game with moving balls doesn't work with javascript : <p>I created this game using javascript and sublime. In theory I should visualize two balls moving around the canvas but actually I see only one yellow ball stopped in the middle of the canvas. Why the ball doesn't move?</p>

<p>This is the code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Canvas Tutorial&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
        window.onload = draw;

        function draw() {


            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, 400, 300);
            ctx.fillStyle = "yellow";
            ctx.beginPath();

            for (var i = 0; i &lt; circles.length; i++) {
                ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, Math.PI * 2, false);
                ctx.fill();

                if ((circles[i].y &gt; 300 - circles[i].r) &amp;&amp; circles[i].direction === 1) {
                    circles[i].direction = 2;
                } else if ((circles[i].x &gt; 400 - circles[i].r) &amp;&amp; (circles[i].direction === 2)) {
                    circles[i].direction = 3;
                } else if ((circles[i].y &gt; 300 - circles[i].r) &amp;&amp; (circles[i].direction === 4)) {
                    circles[i].direction = 3;
                } else if ((circles[i].y &lt;= circles[i].r) &amp;&amp; circles[i].direction === 3) {
                    circles[i].direction = 4;
                } else if ((circles[i].x &lt; circles[i].r) &amp;&amp; circles[i].direction === 4) {
                    circles[i].direction = 1;
                } else if ((circles[i].y &lt; circles[i].r) &amp;&amp; circles[i].direction === 2) {
                    circles[i].direction = 1;
                }

                if (circles[i].direction === 1) {

                    circles[i].x += circles[i].speedX;
                    circles[i].y += circles[i].speedY;
                } else if (circles[i].direction === 2) {

                    circles[i].x += circles[i].speedX;
                    circles[i].y -= circles[i].speedY;
                } else if (circles[i].direction === 3) {

                    circles[i].x -= circles[i].speedX;
                    circles[i].y -= circles[i].speedY;
                } else {

                    circles[i].x -= circles[i].speedX;
                    circles[i].y += circles[i].speedY;
                }
            }
        }

        var circles = [{ x: 200, y: 150, r: 40, direction: 1, speedX: 1, speedY: 2 }, { x: 200, y: 150, r: 70, direction: 1, speedX: 2, speedY: 1 }];

        setTimeout(draw, 10);



    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas" width="400" height="300"&gt;&lt;/canvas&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
