Question

i have some coordinates, which i want to draw on a HTML5 canvas step-by-step. i want that, the line slowly grows. I have this piece of code but it doesn’t do what i expect. Anyone can help me?

for(i=1;i<data[0].length;i++)
{
  context.lineTo(data[0][i],data[1][i]);
  setTimeout(function(){
  context.stroke();},3000);
}

Answer 1

Try

for(i=1;i<data[0].length;i++)
{
  context.lineTo(data[0][i],data[1][i]);
  setTimeout(function(){
  context.stroke();},3000*i);
}

Or you could change it to use setInterval like. This should work, but I haven’t tested it.

var i=0;
var length=data[0].length;
var id = setInterval(function(){
  context.lineTo(data[0][i],data[1][i]);
  context.stroke();
  if(i++===length){clearInterval(id)}
},3000);