Question

I am working on an animation using Javascript and HTML5 CAnvas. How do achieve a delay ( non-blocking ) within a for loop ? I want to make sure that the second line doesnt get drawn before the delay is over .

for (i=1;i<coor.length;i++)

        {
            context.beginPath();
            var end_point=coor[i];
            var x1y1=start_point.split(',');
            var x2y2= end_point.split(',');


            context.moveTo(parseInt(x1y1[0]),parseInt(x1y1[1]));
            context.lineTo(parseInt(x2y2[0]),parseInt(x2y2[1]));
            context.stroke();

            start_point=end_point;


        }

Answer 1

It would be better if you could re-factor your code:

function animate(position)
{
   // do stuff based on position

   if(position++ < 100){
       setTimeout(function(){animate(position);}, 100);
   }
}