javascript - html5キャンバスコードの空白化

Question

私はhtml5キャンバスで私が持っている問題を修正することが切実に必要です。教育ゲームを作っていますが、別の写真を追加して必要なコードを変更した後、キャンバスが空白になりました。変更を元に戻しましたが、問題は解決しませんでした。私はこの1週間ほどそれを修正しようとして過ごしましたが、アイデアが足りなくなりました:(これが関連するコードです（誰かが別の部分を必要としている場合は、そう言ってください）：

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1041;
canvas.height = 550;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/introbackground.png";
//.... rest of the photos load like this so I won't put it...
// Level 1 background 1 image
var bbg1Ready = false;
var bbg1Image = new Image();
bbg1Image.onload = function () {
    bbg1Ready = false; //Exception since it shouldn't load at the beginning
};
bbg1Image.src = "images/pollutedbeach1.png";

// Game objects
var hero = {
    speed: 200 // movement in pixels per second
};
var level1;
var level2;
var biolevel = false;
//...Code to make the hero picture move with arrow keys and to reset the game are skipped...
if (hero.x <= (level1.x + 345)
&& level1.x <= (hero.x + 32)
&& hero.y <= (level1.y +50)
&& level1.y <= (hero.y + 32)){
    biolevel = true;
    return biolevel;
}

var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }
    //...The same for all photos previously loaded...
    if (biolevel == true){
        level1Ready = false;
        level2Ready = false;
        bbg1Ready = true;
        hero.speed = 125;
    }
};
//...Then the main game loop to animate it...

申し訳ありませんが、それはちょっと長いですが、私は本当に解決策が必要です。ありがとう！