GoogleChromeだと、drawIndex でエラーが出ることがある

JavaScript canvas

Google Chrome で canvas をいじっていたらこんなエラーが。

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

Firefoxだと動くのになんでー？って思ったら、drawIndex で範囲外をコピーしようとしていたことが原因でした。

  context.drawImage(img, sx, sy, size, size, dx, dy, size, size);

コピー元領域の指定(第二から第五引数)で、画像からはみ出すような指定をするとダメみたいです。
なので、きちんと範囲内に収まるようにチェックしなければいけません。

  var w = (sx + size < img.width) ? size : img.width - sx;
  var h = (sy + size < img.height) ? size : img.height - sy;
  
  context.drawImage(img, sx, sy, w, h, dx, dy, w, h);


Firefox は大丈夫なのに・・・と思ったら、Google Chromeの実装が仕様として正しいみたいです。

描画元の矩形がソースのイメージの中に完全に収まらない、または、sw または sh 引数のいずれかが 0 なら、INDEX_SIZE_ERR 例外を発生させなければいけません。

http://www.html5.jp/canvas/ref/method/drawImage.html

えーっ、めんどくさい（笑）