What is the correct way to output an array of canvas images?

Question

Canvas

Hello everyone, is there anyone who understands canvas?
I'm trying to make a game (I'm still learning), and there was such a problem that when using rect, everything is fine ( https://codepen.io/dvill/pen/WNpvMba ), but not so much when using drawimage ( https://codepen.io/dvill /pen/rNyVJxN )
I will be grateful if you can tell me what I can be wrong

Answer 1

Instead of repaintPanel add

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

PS In general, the implementation through setInterval is just awful, make one game loop and use requestAnimationFrame or setTimeout at worst .
The first thing that came across , read it if you have no idea what it is

Answer 2

The problem is that if you assign a new url to the src property of the Image object, the image will not appear there instantly, it will be loaded in the background. Accordingly, you need to wait for loading through the event before drawing.
Well, and another tip, if you load pictures in parallel, each in its own Image, it will be faster.