Step 4: Draw the image on the canvas.
Hint: Use the
drawImage method. However,
if you draw the image before it loads, it will not appear. So to be
safe, you should also use a
load event listener:
// create a context variable that will be used below
let context = yourCanvasVariable.getContext(`2d`)
// draw the image immediately
drawImage()
// in case the image wasn't loaded yet, draw the image after it loads
yourImageVariable.addEventListener(`load`, drawImage)
function drawImage() {
// clear the canvas
context.clearRect(0, 0, yourCanvasVariable.width, yourCanvasVariable.height)
// draw the image on the top left corner of the canvas
context.drawImage(yourImageVariable, 0, 0)
}