CodingForums.com - HTML5, canvas, and time-delay

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - HTML5, canvas, and time-delay (http://www.codingforums.com/showthread.php?t=273953)

HTML5, canvas, and time-delay

Ok, this is a pretty simple setup. I create an HTML5 canvas, make it 250 by 250 pixels, color it grey just to show where its boundaries are, then i put 6 blue circles across it:

Code:

     <script>

      var canvas=document.getElementById("mycanvas"),

       ctx = canvas.getContext("2d");

       canvas.width = canvas.height = 250;

         ctx.fillStyle="grey";

       ctx.beginPath();

       ctx.moveTo(0,0);

       ctx.lineTo(0,250);

       ctx.lineTo(250,250);

       ctx.lineTo(250,0);

       ctx.fill();

        var circlex=0;

        var circley=0;

         ctx.fillStyle="blue";

       ctx.beginPath();

       for (i=0; i<6; i++)

  {

       ctx.arc(circlex,circley,25,0, Math.PI * 2, true);       

       ctx.fill();  

       circlex=circlex+50;

       circley=circley+50;

  }

</script>

my question, how can I put a time-delay in there? That is, rather than have all the circles display at once, say, put a 1-second delay before each one is drawn....

sounds like a job for setTimeout...

Code:

<script type="text/javascript">

      var canvas=document.getElementById("mycanvas");

       ctx = canvas.getContext("2d");

       canvas.width = canvas.height = 250;

         ctx.fillStyle="grey";

       ctx.beginPath();

       ctx.moveTo(0,0);

       ctx.lineTo(0,250);

       ctx.lineTo(250,250);

       ctx.lineTo(250,0);

       ctx.fill();

        var circlex=0;

        var circley=0;

         ctx.fillStyle="blue";

       ctx.beginPath();

       drawCircs();     

  

  function drawCircs(){

  var circ=0;

  ctx.arc(circlex,circley,25,0, Math.PI * 2, true);       

       ctx.fill();  

       circlex=circlex+50;

       circley=circley+50;

        circ++;

        if(circ<5){

        setTimeout(drawCircs,1000)

                }        

  }

</script>

Quote:

Originally Posted by xelawho (Post 1272688)

sounds like a job for setTimeout...

Thanks! Only thing I had to change from yours was where you had
var circ=0;
inside function drawCircs() --- that put the drawing of circles into an endless loop (although that wasn't immediately apparent because the other circles were being drawn off the canvas).