Javascript 图像在加载时未显示在画布上

我试图让一个玩家的图像在画布上移动。加载时未显示播放器图像。我使用了一个警报来检查onload，它看起来确实在运行，但是没有显示图像

如果我只左右移动，玩家图像不会显示，如果我只上下移动，它也不会显示。在我沿X和Y方向移动后，图像确实会显示，这使我认为在我的动画功能设置X和Y之前，X和Y没有正确设置。虽然我在电脑上使用自己的图片，但我看不出初始X和Y加载有什么问题，但我只是插入了一些随机图片，这样你们就可以看到加载的东西

我只是把整个代码放在这里，我不知道这是否太多，但我不确定我做错了什么。这是我第一次在这里发布问题。如果有人告诉我我做错了什么，我将不胜感激

编辑：我变了

var destX = xToCenter;
var destY = yToCenter;

仅仅是实际的数字

var destX = 260;
var destY = 220;

这是可行的，但我真的不明白为什么。有人能解释为什么我不能使用xToCenter和yToCenter进行onload，但它在移动功能期间工作吗

//创建画布
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
画布宽度=600；
帆布高度=600；
//创建背景画布
var worldCanvas=document.getElementById（“worldCanvas”）；
var wctx=worldCanvas.getContext（'2d'）；
worldCanvas.width=600；
worldCanvas.height=600；
//玩家形象
var avatar=新图像（）；
var-sourceX=32；
var-sourceY=32；
var-sourceWidth=16；
var-sourceHeight=32；
var destWidth=sourceWidth*5；
var destHeight=sourceHeight*5；
var destX=xToCenter；
var destY=中心；
无功转速=4；
var faceRight=0；
var faceLeft=1；
var faceDown=2；
var faceUp=3；
var animation=[0,32,64]；
var i=0；
//背景图像
var worldMap=新图像（）；
var sMapX=0；
var sMapY=0；
var sMapWidth=canvas.width；
var sMapHeight=画布高度；
var-dMapX=0；
var-dMapY=0；
var dMapWidth=canvas.width；
var dMapHeight=canvas.height；
var worldWidth=1280；
var worldHeight=873；
//中锋
var xToCenter=（0.5*dMapWidth-0.5*destWidth）；
var yToCenter=（0.5*dMapHeight-0.5*destHeight）；
//加载并绘制背景
worldMap.src=”http://img06.deviantart.net/75db/i/2013/332/5/2/random_background_by_electriczerox-d6vyp1u.png";
worldMap.onload=函数（）{
wctx.drawImage（世界地图、sMapX、sMapY、sMapWidth、sMapHeight、dMapX、dMapY、dMapWidth、DMAPHight）；
警报（“已加载世界地图”）；
}
//加载并绘制化身
avatar.src=”http://www.somerandomfacts.com/wp-content/uploads/2013/11/jpg1";
avatar.onload=函数（）{
ctx.drawImage（头像、源X、源Y、源宽度、源高度、目的地X、目的地Y、目的地高度）；
警报（“加载了化身”）；
}
//清清楚楚
;
（功能（）{
函数main（）{
window.requestAnimationFrame（主）；
wctx.clearRect（0,0，canvas.width，canvas.height）；
clearRect（0，0，canvas.width，canvas.height）；
wctx.drawImage（世界地图、sMapX、sMapY、sMapWidth、sMapHeight、dMapX、dMapY、dMapWidth、DMAPHight）；
ctx.drawImage（头像、源X、源Y、源宽度、源高度、目的地X、目的地Y、目的地高度）；
}
main（）；
})();
//移动化身
window.addEventListener（'keydown'，函数（事件）{
var keyPressed=event.keyCode；
开关（按键）{
//a向左移动
案例65：
如果（sMapX>0）sMapX-=速度；
destX=xToCenter；
sourceX=faceLeft*sourceWidth；
动画循环（）；
sourceY=动画[i]；
打破
//w向上移动
案例87：
如果（sMapY>0）sMapY-=速度；
destY=中心；
sourceX=faceUp*sourceWidth；
动画循环（）；
sourceY=动画[i]；
打破
//d向右移动
案例68：
如果（sMapX如果（i我还在学习，但我想我可以回答我自己的问题。当我创建一个变量时，我应该先给它一个初始值，然后再将它设置为另一个变量