Как правильно выводить массив изображений canvas?

Question

[melior33]

Привет всем, есть кто разбирается в canvas?
пытаюсь сделать игру(учусь пока), и возникала такая проблема, что при использовании rect всё нормально( https://codepen.io/dvill/pen/WNpvMba ), а при drawimage не очень( https://codepen.io/dvill/pen/rNyVJxN )
буду благодарен, если сможете подсказать в чем могу ошибаться

Answer 1

[twobomb]

Вместо repaintPanel добавьте

colors.forEach(e=>{
  let img = new Image();
  img.src= e.img;
  img.onload = function(){
      e.isLoaded = true;
      if(colors.every(e1=>e1.isLoaded))        
        repaintPanel();
  }
});

P.S. А вообще реализация через setInterval просто ужас, сделайте один игровой цикл и используйте requestAnimationFrame или setTimeout на худой конец
Первое что попалось, ознакомтесь если понятия не имеете что это такое

Comments

[melior33]

Спасибо за помощь

Answer 2

[Дмитрий Беляев]

Проблема в том, что если присвоить в свойство src объекта Image новый url, то картинка не появится там моментально, она будет загружаться в фоне. Соответственно нужно дожидаться загрузки через событие, прежде чем рисовать.
Ну и еще совет, если грузить картинки паралельно, каждую в свой Image, то будет быстрее.