title: Canvas not working when inside a for loop
body: <p><strong>Goal:</strong>
  I'm trying to load 32 images, then use drawImage function &amp; save the modified image to the same folder.</p>
  <p><strong>Errors:</strong> There are no error messages.</p>
  <p><strong>What I tried:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>                const chessLettersArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
                  for (const letter of chessLettersArr) {
                      for (let i = 0; i &lt; 8; i++) {
                          if (row[i][letter] !== '-') {
                                  Canvas.loadImage(path.join(__dirname, `../images/chesspieces/${row[i][letter]}.png`)).then((image) =&gt; { 
                                      ctx.drawImage(image, utils.chessLetter(letter), utils.chessNo(row[i].number.toString()), 170, 170)
                                  })
                          }
                      }
                  }</code></pre>
  </div>
  </div>
  </p>
  <p>This code does not draw any images at all <strong>even though when I console log 'image'</strong>, it'd say '[ complete]'</p>
  <p>Dependency is 'Canvas' [npm i canvas]</p>
  <p>Thanks for reading &amp; please help me if you know this issue!</p>