Lopple

画像の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);
  });
});

ローカル環境だとエラーになるらしい。

cf.http://stackoverflow.com/questions/8688600/context-getimagedata-on-localhost

• canvasの注意事項
  canvasの大きさを変えたいときはスタイルで変更してはならない。
  描画内容がそのまま拡大しまうから。
  属性にwidth, heightがあるのでそれを利用する。ピクセルで数値を指定すればよい。

変形関数は既に描画しおわったものに対してはなんら影響を与えない。

描画の際に基準とする枠を移動・回転・変形するイメージ。

変形した状態はずっと保持されてしまうので逐一save,restoreするのが吉。

簡単に言うと筆を持った人の位置、角度、見方が変わると考えるとよい。