Почему Google Chrome не грузит картинки в Canvas?

Question

[wingo77]

Я написал небольшую игру на Javascript подгрузил фон, спрайт игрока сделал все как надо и все работает, я был доволен, но в Google Chrome не загружает картинки. в Firefox, и !!!Microsoft Edge все работает без проблем.

var bg = new Image();
bg.src = 'img/bg.jpg';

var pl = new Image();
pl.src = 'img/pl.png';
ctx.drawImage(bg, 0, 0);
ctxPl.drawImage(pl, sx, sy, heroWidth, heroHeight, player.pos[0], player.pos[1], heroWidth, heroHeight);

я уже пробывал разные способы и window.onload и setInterval, setTimeout, и еще другие способы. Дело в том, что цикл игры выполняется до того как они загружены, как выполнить скрип после загрузки все картинок? js месяца два начал учить немного, возможно есть другие способы?

Comments

[wingo77]

wingo7.github.io ссылка на игру

Answer 1

[wingo77]

Дело в том что у меня в css для canvas стоял цвет фона #aaa; этот фон накрывал все картинки, я убрал свойстов bgc и все заработало!

Answer 2

[Александр Федорук]

var pl = new Image();
pl.src = 'img/pl.png';

pl.onload = function () {
   // картинка загрузилась
}

Comments

[wingo77]

так тоже делал, не помогло(