title: Showing hundreds of tiny images in HTML5 Canvas only after load
body: <p>I have a canvas and 100 tiny images that I want to add to my canvas in a grid-like formation.</p>
  
  <p>I have already achieved this, but the images are being draw on the canvas one by one and sometimes the image at the 40th position might be drawn before the image at the 10th position.</p>
  
  <p>It takes a couple of seconds and then I get my desired result, but I was wondering how I could show images only after they're loaded?</p>
  
  <p>I know there are other questions with a similar problem but I have read all of them and tried their solutions but have not succeeded yet.</p>
  
  <p>I have this piece of code that draws the images one by one on the canvas at the right position using nested for loops:</p>
  
  <pre><code>for(...) {
    for(..) {
      add_image(source, row, column, width, height);
    }
  }
  </code></pre>
  
  <p>Now <code>add_image</code> actually creates an image object and draws it <code>onload</code></p>
  
  <pre><code>function add_image(...) {
    let image = new Image();
    image.src = source;
  
    image.onload = function() {
      context.drawImage(img, row, col, width, height);
    }
  }
  </code></pre>
  
  <p>In this exact situation, what is the best way to load all the images first and the "draw" them? I tried creating an array and populating it with all the image objects, then when all the images were loaded I would run the for loop to draw the images, but it wouldn't work and I didn't see a console error so I was left clueless.</p>
  
  <p>Thank you in advance!</p>