Uncaught TypeError when calling drawImage function

Are you sure the image.jpg has been loaded before you call drawImage()?

From w3schools:

Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.


This happened to me.

I did drawImage(x, y, img); by accident, when it should be drawImage(img, x, y); Check to make sure your arguments are in the correct order

After I did that, it still didn't work. I was using Promises.all() (from this answer: https://stackoverflow.com/a/53290838/2336212) and didn't realize that the result was an array of all passed in values. I mistakenly passed resolve(images). Instead of receiving an array of images, I received an array of arrays of images. Make sure you only pass a single object back through resolve() unless you expect a 2D array. I changed it to resolve(image) and it worked.