drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

画像のwidth, heightがキャンバスのサイズや描画範囲よりも超えていると何も描画されないっぽい。chrome

またdrawImageは画像がロード済みでないと描画されない。そして何のwarningも出さない・・・

jqueryのreadyのようにdom解析の時点で走ってしまう関数内だと失敗する可能性がある。

↓駄目な例

var img = new Image;
img.src = 'hoge.jpg';
$(function() {
  var c = $('#canvas_element').get(0);
  var ctx = c.getContext('2d');
  ctx.drawImage(img, 10, 10);
});

以下のように書くのが最も正統と思われる。

$(function() {
  var c = $('#canvas_element').get(0);
  var ctx = c.getContext('2d');

  var img = new Image;
  img.src = 'hoge.jpg';
  $(img).load(function() {
    ctx.drawImage(img, 10, 10);
  });
});