Can't draw image to canvas unless I use setInterval?


#1

hey guys I’m following a tutorial on YouTube on how to make a snake game with javascript. https://www.youtube.com/watch?v=9TcU2C1AACw&t=190s I copied his code and commented it out. Now I’m reconstructing it piece by piece to see how it works, but not step by step.

For instance once i created the global variables i wanted to draw the background image to the canvas just to look at it

ctx.drawImage(ground, 0, 0); 

this by itself doesn’t work. Watching him do it in the video he creates a draw function, puts that code in it, then outside the function sets the same function to run at an interval of 100ms.

 function draw() { 
ctx.drawImage(ground, 0, 0); 
} 
let game = setInterval(draw, 100); 

Now it works?? what’s happening?
here’s his github https://github.com/CodeExplainedRepo/Snake-JavaScript


#2

Please show us your non-working reconstruction so that we can properly investigate and explain the issue.


#3

https://jsfiddle.net/tmLrs9wy/1/

the commented code below my JS is the guy’s I’m copying

heres the tutorial


#4

The issue is that the ground image is not available.


#5

that’s cause i don’t know how or even know if you can upload images to js fiddle. but it’s in my img folder on my machine