CanvasのdrawImage APIは下図のように、ソースイメージ中の任意の矩形領域をCanvas領域中の任意の大きさの矩形にマッピングできます。 context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) このAPIによって、イメージの部分領域の縦・横方向の拡大縮小が自由にできるようになっています。 今回は、この拡大機能がちょっと気になったので以下のブラウザの各バージョンで調べてみました。 Firefox Chrome Safari Opera 3.6.11 8.0.552.11 dev 5.0.2 10.63 調べたのは、下のような赤と青が1ピクセル毎に交互に描かれているイメージを拡大したときの補間の表現です。 このイメージを下記表のように拡大してみました。 5倍 10倍 20倍 40倍 80倍 160倍 320倍 640倍 1
![Canvasのイメージ拡大描画について比較してみた - 風と宇宙とプログラム](https://cdn-ak-scissors.b.st-hatena.com/image/square/fdf96a298d48e9a093a7c5fc8dd6df2d095c003a/height=288;version=1;width=512/http%3A%2F%2Fimg.f.hatena.ne.jp%2Fimages%2Ffotolife%2Fm%2Fmindcat%2F20101024%2F20101024213914.png)