幅と高さを指定したcanvasに円を描いた。
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" style="width: 200px; height: 200px;"></canvas>
<script>
function drawArc(id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 90, 0, Math.PI * 2, true);
ctx.stroke();
}
drawArc('canvas1');
drawArc('canvas2');
</script>
同じ円が描かれると思っていたが、
実行すると、異なる2つ円が描かれた。
これはどういうことだろうか。
canvasは、width属性とheigh属性で指定された描画領域に描画する。
描画領域に描かれた画像は、CSSの指定に合わせて拡大・縮小されて表示される。
canvasは、width属性とheigh属性が指定されなかった場合、幅300ピクセル、高さ 150ピクセルの要素として初期化される。
canvas2は、幅300x高さ150ピクセルの描画領域に円を描き、styleで指定した幅200x高さ200ピクセルに画像のサイズを変更して表示しているため、楕円が表示されたようだ。
canvasのグリッドについて、MDNの次のページが参考になった。