Canvas not drawing image when command run from file

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

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

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
1 Like

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.