javascript - how to draw Canvas using for loop with delay? -

var context = document.getelementbyid("canvas").getcontext("2d");  for(var = 0; i< savedmove.length; i++){     dosettimeout(i); }  function dosettimeout(i) {     setinterval(function() { animate(savedmove[i][0], savedmove[i][1]); }, 100); } function animate(xpos, ypos) {     context.fillstyle = "red";     context.fillrect(xpos, ypos, 5, 5); } 

i have every x , y position move inside of 2d array (savedmove) , want draw array information delay. canvas not draw this. keep debugging cannot figure out problem.

you're setting savedmove.length timers tick parallelly every 100 milliseconds. i'm pretty sure not want, though it's hard guess is. first change setinterval settimeout , make them fire @ different times, 100 ms away each other:

function dosettimeout(i) {     settimeout(function() { animate(savedmove[i][0], savedmove[i][1]); }, 100 * i); } 

note not best way it, better original code.

then can debug it, 'cause might draw out of visible canvas:

console.log("canvas size:", document.getelementbyid("canvas").width, document.getelementbyid("canvas").height);  function animate(xpos, ypos) {     context.fillstyle = "red";     context.fillrect(xpos, ypos, 5, 5);     console.log("animate:", xpos, ypos); }