HTMLのCanvasのwidth/height属性とCSSの設定の違いについて

幅と高さを指定した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の次のページが参考になった。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください