i have a problem with my image not appearing on my canvas can you guys help me?

Question

I am trying to make flappy bird but when I try to load the background on my canvas it just does nothing

 var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); // load img var bird = new Image(); bird.src = "img/bird.png"; var bg = new Image(); bg.src = "img/bg.png"; var fg = new Image(); fg.src = "img/fg.png"; var pipeNoord = new Image(); pipeNoord.src = "img/pipeNorth.png"; var pipeSouth = new Image(); pipeSouth.src = "img/pipeSouth.png"; // draw images window.onLoad = function(){ ctx.drawImage(bg, 0, 0); } 

Answer 1

I would suggest you move the whole image loading code into the onload handler. Like so, you can make sure that everything is loaded before you actually call drawImage . In addition, as @Chris G mentioned, it's window.onload , not window.onLoad :

 // draw images window.onload = function(){ var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); // load img var bird = new Image(); bird.src = "img/bird.png"; var bg = new Image(); bg.src = "img/bg.png"; var fg = new Image(); fg.src = "img/fg.png"; var pipeNoord = new Image(); pipeNoord.src = "img/pipeNorth.png"; var pipeSouth = new Image(); pipeSouth.src = "img/pipeSouth.png"; ctx.drawImage(bg, 0, 0); }