HTML5, canvas, and time-delay

[algomeysa]

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:

     <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....

[xelawho]

sounds like a job for setTimeout...

<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>

[algomeysa]

Originally Posted by xelawho

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).