やりたいこと
canvasタグは2つの方法でサイズを指定でき見た目は同じが、JavaScriptで扱う際に動作が異なるので確認します。
環境
Chrome： 113.0.5672.127
Canvasのサイズ設定方法
CanvasのサイズはattributeとStyleで設定できます。
下のように表示の結果は同様です。
attribute(canvasタグ内)での設定
<canvas width=200 height=200></canvas>上記のhtmlで200×200のCanvasが下のように描画できます。
(領域がわかりやすいように背景を灰色にしています。)
Styleでの設定
<canvas style="width:200px; height:200px;"></canvas>上記のhtmlで200×200のCanvasが下のように描画できます。
(領域がわかりやすいように背景を灰色にしています)
JavaScriptで操作
座標系
試験
attributeとStyleでサイズを設定したcanvasに以下のScriptを実行してみます。
(0,0)から(100,100)に青の線を描きます。
Canvasのサイズは200×200なので左上から真ん中に青い線が引かれるはずです。
/*canvas からContext(let ctx)を取得 */
ctx.beginPath() ;
ctx.moveTo( 0, 0 ) ;
ctx.lineTo( 100, 100 )
ctx.strokeStyle = "blue" ;
ctx.lineWidth = 5 ;
ctx.stroke() ;attribute
style
結果
上のようにattributeで設定した場合、想定した通りの動作になります。
しかしstyleで指定した場合、想定した通りの動作になりません。
それぞれのWidth/Heightの意味
ここではなぜ二つのWidth/Heightの設定方法で差が出たのかを説明します。
結論から言ってしまうとattributeとStyleで設定するWidth/Heightが異なります。
attributeとStyleのWidth/Heightの意味は以下の通りです。
attribute ： 座標空間の幅/高さ
Style ： 表示の幅/高さ
つまりstyleでWidth/Heightを設定してもCanvas内の座標は変わりません。
attributeでWidth/Heightをしない場合、座標空間は300×150になります。
つまり以下の例では300×150のCanvasを200ｘ200に変形して表示します。
<canvas style="width:200px; height:200px;"></canvas>そのため想定していた結果にはなっていませんでした。
結論
Canvasの中の座標のサイズを設定する場合はattributeで指定します。
ただしStyleでの設定が不要というわけではありません。
例えばattributeでサイズを変更してしまうと、JavaScriptでの描画処理を修正する必要があります。
しかしStlyeではサイズを変更するだけで拡大/縮小することができます。
attributeでcanvas座標のサイズを指定した後にWindowサイズに合わせてStyleで表示サイズを変更するという実装も可能です。
参考にさせていただいたサイト
コメント