Canvas not drawing image when command run from file

[ResistingGuide41]

I am currently making an interactive application about knitting. The only problem, when I try to draw an image to the canvas from the js file, it doesn’t work, and when I type that same command into the js console, it works. I don’t know why this is happening.

Repl link The Wonders of Knitting

The command I used is

ctx.drawImage(garter, 0, 0 , 20, 20, window.innerWidth/2-10, 10, 20, 20);

Edit: No errors showed up in the js console

[ResistingGuide41]

The canvas context is fine because I can still draw rectangles to the canvas.

[Sky]

Replace your current script.js with this:

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
window.addEventListener("resize", () => {
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
});

var garter = new Image();
garter.onload = function() {
  ctx.drawImage(garter, 0, 0, 20, 20, window.innerWidth / 2 - 10, 10, 20, 20);
};
garter.src = 'path_to_garter_image'; // Replace with the actual path to your image

[ResistingGuide41]

I was just drawing it too fast. It couldn’t load.