Где ошибка в коде цикла Javascript?

Question

[DarthJS]

Все привет! Я начинающий , учу Javascript. Помогите найти ошибку.

Хочу в Canvas отобразить последовательные картинки (без спрайтов).
У меня есть массив урлов картинов. В следующей функции я их пихаю как src обьектов new Image:

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

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

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

					})
			draw(imgs)
	};

Далее рисуем в канвасе:

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

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

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

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

			})
	}

Вызываю:

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

Обьясните пожалуйста, что я сделал не так?

Answer 1

[Алексей Рытиков]

Для начала, расставьте точки с запятыми.
Затем, прежде, чем выполнить draw(imgs), вам нужно дождаться загрузки всех изображений с помощью img.onload.

Comments

[DarthJS]

А сама функция draw с вложенным циклом написана правильно?

[Алексей Рытиков]

DarthJS: не буду утверждать, но вроде бы да

[DarthJS]

Алексей Рытиков: дошло, спасибо, разобрался.

Answer 2

[twobomb]

Не знаю возможно у тебя не успевало загружать картинки, либо ты забыл взять контекст канвы, код же ты не полностью выложил. Ну вот я сделал, дописал функцию загрузки картинок вроде работает https://jsfiddle.net/twobomb/cdcmb15a/

Comments

[DarthJS]

Большое спасибо за пример, разобрался.