Javascript 移除画布游戏中的背景

我正在尝试学习JavaScript，并找到了以下教程：

但我不知道如何从游戏中删除背景。 如果您有任何关于删除背景的帮助，我们将不胜感激！：）

影响背景的代码：

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

// Draw everything
var render = function () {
if (bgReady) {
    ctx.drawImage(bgImage, 0, 0);
}

整个JavaScript文件：

//创建画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=512；
canvas.height=480；
document.body.appendChild（画布）；
//背景图像
var bgrady=false；
var bgImage=新图像（）；
bgImage.onload=函数（）{
bgrady=true；
};
bgImage.src=“images/background.png”；
//英雄形象
var-heroredy=false；
var-mage=新图像（）；
heroMage.onload=函数（）{
heroReady=true；
};
heroMage.src=“images/hero.png”；
//怪物形象
var=false；
var monsterImage=新图像（）；
monsterImage.onload=函数（）{
monsterReady=true；
};
monsterImage.src=“images/monster.png”；
//游戏物品
var hero={
速度：256//以像素/秒为单位移动
};
var={}；
var monstersCaught=0；
//处理键盘控制
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
}，假）；
//当玩家抓到怪物时重置游戏
变量重置=函数（）{
hero.x=canvas.width/2；
hero.y=canvas.height/2；
//随机将怪物扔到屏幕上的某个地方
monster.x=32+（Math.random（）*（canvas.width-64））；
monster.y=32+（Math.random（）*（canvas.height-64））；
};
//更新游戏对象
变量更新=函数（修饰符）{
如果（38键向下）{//玩家举起
hero.y-=hero.speed*修饰符；
}
如果（40英寸向下键）{//玩家按住
hero.y+=hero.speed*修改器；
}
如果（37英寸向下键）{//玩家左握
hero.x-=hero.speed*修改器；
}
如果（39键向下）{//玩家保持右侧
hero.x+=hero.speed*修改器；
}
//他们在动吗？
如果(
hero.x只需清空图像源：

bgImage.src='';

然后

bgImage.onload
将永远不会执行
bgrady
将始终为false
如果（bgrady）{ctx.drawImage（bgImage，0，0）；}
将永远不会执行
您的背景将保持透明
你是否尝试过切换
图像/background.png
以获得其他所需的背景图像？是的，但问题是我在这个画布游戏下有一个其他画布动画。因此我需要一个透明的背景，但透明的png只会产生更多的bug。
bgImage.src='';