HTML5 Canvas DrawImage not drawing image

Question

I'm having a bit of a bind - I'm trying to draw a sprite on the screen by clipping a single image in a way to display only a small portion of the actual image. However, nothing appears and I receive no errors in my code. Any ideas on what may be wrong?

I left a little extra code in the snippet below where I drew a line to the point where the clipped image is supposed to show up, however there is nothing there no matter what I do.

Edit: It may be worth noting that this code STILL doesn't work even if I don't try to clip the image. I just can't get the image to show up at all.

JSfiddle: http://jsfiddle.net/m7y406z8/

$(function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var window_width = window.innerWidth;
  var window_height = window.innerHeight;

  var Player = function(x, y, spriteset, direction, elevation, animationframe, action) {
    this.x = x;
    this.y = y;
    this.spriteset = new Image();
    this.spriteset.src = spriteset;
    this.direction = direction;
    this.elevation = elevation;
    this.animationframe = animationframe;
    this.action = action;

    a_imageAssets.push(this.spriteset);
  }

  var a_imageAssets = [];

  var peasant = new Player(window_width / 2, window_height / 2, "http://tchwi.com/player/sprites/peasant.png", "s", 0, 0, 0);

  switch (peasant.animationframe) {
    case 0: //if first frame of animation is selected then this is the sprite sheet
      peasant.standingCells = [{
          top: 0,
          right: 25,
          bottom: 29,
          left: 0
        }, //n
        {
          top: 0,
          right: 47,
          bottom: 29,
          left: 25
        }, //nw
        {
          top: 0,
          right: 69,
          bottom: 29,
          left: 47
        }, //w
        {
          top: 0,
          right: 91,
          bottom: 29,
          left: 69
        }, //sw
        {
          top: 0,
          right: 116,
          bottom: 29,
          left: 91
        }, //s
        {
          top: 0,
          right: 138,
          bottom: 29,
          left: 116
        }, //se
        {
          top: 0,
          right: 160,
          bottom: 29,
          left: 138
        }, //e
        {
          top: 0,
          right: 182,
          bottom: 29,
          left: 160
        } //ne
      ];
  }

  var drawCharacter = function(character) {
    drawCells = {}; //object to inject the current cell into
    switch (character.action) {
      case 0: //if character is standing still
        (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] : '');
        break;
    }

    var dx = character.x + (drawCells.right - drawCells.left) / 2;
    var dy = character.y + (drawCells.bottom - drawCells.top) / 2;
    var dWidth = drawCells.right - drawCells.left;
    var dHeight = drawCells.bottom - drawCells.top;
    var sx = drawCells.left;
    var sy = drawCells.top;
    var sWidth = drawCells.right - drawCells.left;
    var sHeight = drawCells.bottom - drawCells.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 = 'black';
    console.log(dx + ", " + dy);
  };

  var drawBackground = function() {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, window_width, window_height);
  };

  var renderCanvas = function() {
    ctx.clearRect(0, 0, window_width, window_height);
    drawBackground();
    drawCharacter(peasant);
    console.log('huh');
  };

  var canvasSizing = function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  canvasSizing();
  renderCanvas();
});

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

<body>
  <canvas id="canvas" width="100%" height="100%"></canvas>
</body>

</html>

Answer 1

You was confused with arguments order. Here is an actual one from MDN:

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Here is a difference in your code:

// 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
);                          );

Here is an updated JSFiddle: http://jsfiddle.net/m7y406z8/1/