у меня есть проблема с моим изображением, не появляющимся на моем холсте, вы, ребята, можете мне помочь?

Question

Я пытаюсь создать легкую птицу, но когда я пытаюсь загрузить фон на холст, он просто ничего не делает

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

Я бы посоветовал вам переместить весь код загрузки изображения в обработчик onload.Таким образом, вы можете убедиться, что все загружено, прежде чем вы на самом деле позвоните drawImage.Кроме того, как упомянул @Chris G, это window.onload, а не 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);
}