Javascript HTML5画布DrawImage非绘图图像

我有点纠结——我试图在屏幕上画一个精灵，通过剪切一个图像，只显示实际图像的一小部分。但是，没有显示任何内容，我的代码中也没有收到任何错误。有什么想法可能是错误的吗

我在下面的代码片段中留下了一点额外的代码，在代码片段中我画了一条线，到了剪裁图像应该显示的位置，但是无论我做什么，那里都没有任何东西

编辑：可能值得注意的是，即使我不尝试剪辑图像，此代码仍然无法工作。我就是无法让图像显示出来

JSfiddle：

$（函数（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var window_width=window.innerWidth；
var window_height=window.innerHeight；
var Player=函数（x、y、精灵集、方向、标高、动画帧、动作）{
这个.x=x；
这个。y=y；
this.spriteset=新图像（）；
this.spriteset.src=spriteset；
这个方向=方向；
本图中，标高=标高；
this.animationframe=animationframe；
这个动作=动作；
a_imageAssets.push（this.spriteset）；
}
var a_imageAssets=[]；
变量=新玩家（窗口宽度/2，窗口高度/2，“http://tchwi.com/player/sprites/peasant.png","s,0,0,0,；
开关（animationframe）{
案例0://如果选择了动画的第一帧，则这是精灵图纸
1.2.1.1.2.2.2.2.2.1.2.2.2.2.2.2.2.2.2.1.2.2.2.2.2.2.2.2.2.2[{
排名：0，
右:25,，
底数：29，
左：0
}，//n
{
排名：0，
右：47，
底数：29，
左：25
}，//nw
{
排名：0，
右：69，
底数：29，
左：47
}，//w
{
排名：0，
右：91，
底数：29，
左：69
}，//sw
{
排名：0，
右：116，
底数：29，
左：91
}，//s
{
排名：0，
右：138，
底数：29，
左：116
}，//se
{
排名：0，
右：160，
底数：29，
左：138
}，//e
{
排名：0，
右：182，
底数：29，
左：160
}//ne
];
}
var drawCharacter=函数（字符）{
drawCells={}；//要将当前单元格注入的对象
开关（字符.动作）{
案例0://如果角色静止不动
（character.direction=“n”？drawCells=character.standingCells[0]：“”）；
（character.direction=“nw”？drawCells=character.standingCells[1]：“”）；
（character.direction=“w”？drawCells=character.standingCells[2]：“”）；
（character.direction=“sw”？drawCells=character.standingCells[3]：“”）；
（character.direction=“s”？drawCells=character.standingCells[4]：“”）；
（character.direction=“se”？drawCells=character.standingCells[5]：“”）；
（character.direction=“e”？drawCells=character.standingCells[6]：“”）；
（character.direction=“ne”？drawCells=character.standingCells[7]：“”）；
打破
}
var dx=character.x+（drawcell.right-drawcell.left）/2；
var dy=character.y+（drawcell.bottom-drawcell.top）/2；
var dWidth=drawCells.right-drawCells.left；
var dHeight=drawcell.bottom-drawcell.top；
var sx=drawcell.left；
var sy=drawcell.top；
var sWidth=drawCells.right-drawCells.left；
var sHeight=drawcell.bottom-drawcell.top；
ctx.drawImage（character.spriteset、dx、dy、dWidth、dHeight、sx、sy、sWidth、sHeight）；
console.log（character.spriteset）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（dx，dy）；
ctx.stroke（）；
ctx.strokeStyle=‘黑色’；
console.log（dx+“，”+dy）；
};
var牵引力地面=功能（）{
ctx.fillStyle='红色'；
ctx.fillRect（0，0，窗宽，窗高）；
};
var renderCanvas=函数（）{
ctx.clearRect（0，0，窗宽，窗高）；
牵引杆接地（）；
性格（农民）；
console.log（'huh'）；
};
var canvassing=函数（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
}
拉票（）；
renderCanvas（）；
});
您对参数顺序感到困惑。这是：

以下是代码中的一个差异：

// You have:                You need:
ctx.drawImage(              ctx.drawImage(
  character.spriteset,        character.spriteset,
  dx,                         sx,
  dy,                         sy,
  dWidth,                     sWidth,
  dHeight,                    sHeight,
  sx,                         dx,
  sy,                         dy,
  sWidth,                     dWidth,
  sHeight                     dHeight
);                          );

下面是一个更新的JSFIDLE:
您对参数顺序感到困惑。这是：

以下是代码中的一个差异：

// You have:                You need:
ctx.drawImage(              ctx.drawImage(
  character.spriteset,        character.spriteset,
  dx,                         sx,
  dy,                         sy,
  dWidth,                     sWidth,
  dHeight,                    sHeight,
  sx,                         dx,
  sy,                         dy,
  sWidth,                     dWidth,
  sHeight                     dHeight
);                          );

这是一个更新的JSFIDLE:
哦，该死的。那是个愚蠢的错误。。。还是不管用？哦，该死。那是个愚蠢的错误。。。但似乎还是不起作用？