CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
RoKK
RoKK

Reputation: 618

html5-javascript drawing on canvas step-by-step

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);
}

Upvotes: 0

Views: 562

Answers (2)

gopi1410
gopi1410

Reputation: 6625

Check out the animate.js library. It may be of help. Check the Readme file for details.

Upvotes: 0

qw3n
qw3n

Reputation: 6334

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

Upvotes: 3

Related Questions