title: JavaScript: I'm trying to draw both text and image on a canvas in a loop, and then download it, but only the text shows in the canvas after download
body: <p>I noticed that the image starts drawing to the canvas (onload image takes time) after the text has been drawn to the canvas (in a loop), how do I go about it, I want the text and image to be drawn, before running another.</p>
  <p>(<a href="https://i.stack.imgur.com/YWoRQ.png" rel="nofollow noreferrer">How I want it to be.</a>)</p>
  <p>(<a href="https://i.stack.imgur.com/8rgCx.png" rel="nofollow noreferrer">But how I get it.</a>)</p>
  <pre><code> Object.values(results).map(async listArray =&gt; {
        //clear to draw new data to the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(image, 0, 0, image.width, image.height)
        var im = []
  
        listArray.map(async data =&gt; {
          if (validBase64Image(data?.text)) {
            im = new Image()
            im.onload = () =&gt; ctx.drawImage(im, data?.x, data?.y, 100, 100)
            im.src = data.text
          }
          if (!validBase64Image(data?.text)) {
            ctx.fillText(data?.text, data?.x, data?.y)
          }
        })
        downLoadWithCsvTitle(canRef, listArray?.[0]?.text)// download canvas
      })
    }
       ```
  </code></pre>