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

JavaScript
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

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

lik
lik2736×1824 354 KB

6

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