Where is the error in the Javascript loop code?

Question

JavaScript

Hi everybody! I am a beginner learning Javascript. Please help me find the error.
I want to display consecutive pictures in Canvas (without sprites).
I have an array of image urls. In the following function, I shove them as src of new Image objects:

function loadImg(linkArr, draw){
  var imgs = [];

    linkArr.forEach(function(link){
      var img = new Image();

      img.src = link
      imgs.push(img);   // Получаем массив с картнками и их урлами

          })
      draw(imgs)
  };

Next, draw in canvas:

function draw(imgs){   // Принимаем массив

      var step = 0;   // Шаг - координата по У, с изминением которой следующая картинка будет дальше

      imgs.forEach(function(src){   // Бегу по массив

      con.drawImage(src, 0, step, 200 , 150)     // Рисую картинки
        step += 30;                                                //  добавляю шаг

      })
  }

I call:

window.onload = function(){
    loadImg(arr, draw)	    // Если добавить setInterval, то отобразиться первая картинка, потом на том же месте последня..
  }

Please explain what I did wrong?

Answer 1

First, put in semicolons.
Then, before executing draw(imgs) , you need to wait for all images to load with img.onload.