javascript - Image array won't draw to canvas -

i'm learning javascript. great if explain did mistake.

i have array picture links , put them function, should draw image in canvas every picture link.

function draw(imgs){      var step = 0;  // want start zero;      imgs.foreach(function(src){   // go through array links      // , want draw images array      con.drawimage(src, 0, step, 200 , 150)          step += 20;  // step next picture      console.log(step)     console.log(src)     })      console.log(imgs); } 

then execute:

window.onload = function(){     setinterval(function(){       loadimg(arr, draw)         }, 1000) ... 

and it's shows me first picture of array , after setinterval last picture.

sorry bad description, it's 5am

p.s.

loadimage function create array few src of images:

function loadimg(linkarr, draw){     var imgs = [];          linkarr.foreach(function(link){             var img = new image();              img.src = link             imgs.push(img);           })             draw(imgs)      }; 

it's hard made misstake. seems images added @ same time first time loadimg called. in order example draw images delay, need put delay on adding actual sources array, sending 1 url per interval.

since example learning, won't go ways how optimize it.

see code below, here's working example of want accomplish. see comments , you'll see what's going on.

var c = document.getelementbyid("canvas");  var ctx = c.getcontext("2d");  c.width = 400;  c.height = 400;  var images = [];  var links = ["http://pattersonrivervet.com.au/sites/default/files/pictures/puppy-10-icon.png",             "https://38.media.tumblr.com/avatar_2be52b9ba912_128.png"];  var counter = 0;    function draw(imgs){      ctx.clearrect(0,0,c.width,c.height);      var step = 0;  // want start zero;      imgs.foreach(function(src){   // go through array links          // , want draw images array          ctx.drawimage(src, 0, step);          step += src.height;  // step next picture. let's use height of image.      })  }    function loadimg(link){      var img = new image();      img.src = link;      images.push(img);      draw(images);  };      var myinterval = setinterval(function(){ //i set interval variable can remove later if needed.      // can add images in different ways, used array of links      loadimg(links[counter]);            counter++; //set counter next image      if (counter > links.length) {          //if we're out of images, stop trying add more          clearinterval(myinterval);       }       }, 3000);  ctx.filltext("pictures appear in 3s intervals",10,10);

<canvas id="canvas"></canvas>