加载时画布上未显示图像

我正试图让玩家的图像在画布上移动。加载时未显示玩家图像。我使用了一个警报来检查加载，它似乎正在运行，但图像没有显示。

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

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

编辑：我更改了

var destX = xToCenter;
var destY = yToCenter;

到实际数字

var destX = 260;
var destY = 220;

这很有效，但我真的不明白为什么。有人能解释一下为什么我不能使用xToCenter和yToCenter进行加载，但它在移动功能中有效吗？

这是我的jsfiddle

//create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
//create background canvas
var worldCanvas = document.getElementById("worldCanvas");
var wctx = worldCanvas.getContext('2d');
worldCanvas.width = 600;
worldCanvas.height = 600;
//player image
var avatar = new Image();
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 = yToCenter;
var speed = 4;
var faceRight = 0;
var faceLeft = 1;
var faceDown = 2;
var faceUp = 3;
var animation = [0, 32, 64];
var i = 0;
//background image
var worldMap = new Image();
var sMapX = 0;
var sMapY = 0;
var sMapWidth = canvas.width;
var sMapHeight = canvas.height;
var dMapX = 0;
var dMapY = 0;
var dMapWidth = canvas.width;
var dMapHeight = canvas.height;
var worldWidth = 1280;
var worldHeight = 873;
//center player
var xToCenter = (0.5 * dMapWidth - 0.5 * destWidth);
var yToCenter = (0.5 * dMapHeight - 0.5 * destHeight);
//load and draw background
worldMap.src = "http://img06.deviantart.net/75db/i/2013/332/5/2/random_background_by_electriczerox-d6vyp1u.png";
worldMap.onload = function() {
  wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
  alert("worldMap loaded");
}
//load and draw avatar
avatar.src = "http://www.somerandomfacts.com/wp-content/uploads/2013/11/jpg1";
avatar.onload = function() {
  ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  alert("avatar loaded");
}
//clear and redraw 
;
(function() {
  function main() {
    window.requestAnimationFrame(main);
    wctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
    ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  }
  main();
})();
//move avatar
window.addEventListener('keydown', function(event) {
  var keyPressed = event.keyCode;
  switch (keyPressed) {
    //a moves left
    case 65:
      if (sMapX > 0) sMapX -= speed;
      destX = xToCenter;
      sourceX = faceLeft * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //w moves up
    case 87:
      if (sMapY > 0) sMapY -= speed;
      destY = yToCenter;
      sourceX = faceUp * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //d moves right
    case 68:
      if (sMapX < worldWidth - dMapWidth) sMapX += speed;
      destX = xToCenter;
      sourceX = faceRight * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
      //s moves down
    case 83:
      if (sMapY < worldHeight - dMapHeight) sMapY += speed;
      destY = yToCenter;
      sourceX = faceDown * sourceWidth;
      animationLoop();
      sourceY = animation[i];
      break;
  }
});
//animate while moving
function animationLoop() {
  window.requestAnimationFrame(changeI);
}
function changeI() {
  if (i <= animation.length) i += 1;
  animation[i];
  if (i == animation.length) i = 0;
}

.canvas {
  border: 1px solid;
  position: fixed;
  top: 0;
  left: 0;
}
.worldCanvas {
  border: 1px solid;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

<canvas class="canvas" id="canvas"></canvas>
<canvas class="worldCanvas" id="worldCanvas"></canvas>