canvas.width と canvas.style.width はどう違うのですか?

canvas.width は canvas 自体の描画領域の幅、その canvas をブラウザで表示する幅を canvas.style.width で指定しています。
2021年8月26日
ユーザー

いつも分かりやすい動画解説ありがとうございます。
迅速明解な回答でいつも助かっています。

さて質問ですが、
以下は/js/main.jsのソースコード 16 行目からです。

  canvas.width = CANVAS_WIDTH * dpr;  //(1)
  canvas.height = CANVAS_HEIGHT * dpr;  //(1)

  ctx.scale(dpr,dpr);  //(2)
 
  canvas.style.width = CANVAS_WIDTH + 'px';  //(3)
  canvas.style.height = CANVAS_HEIGHT + 'px';  //(3)

 (仮に dpr=2 とします。)

この部分ですが、これは
(1) の部分は
<canvas width=”1200” height=”480”>
ということをしており、
(2) で図形の幅と高さを 2 倍
(3) の部分は

canvas{
    width: 600px;
    height: 240px
}

ということをしていると思います。

このことがもし合っていれば、いくつか疑問点があります。

  1. なぜ (1) が HTML の操作で、(3) が CSS の操作なのか?
  2. なぜ (1) で HTML のcanvasを大きくしても図形は大きくならないのに、CSS をもとのcanvasのサイズに設定するとcanvasと図形が縮小されるのか?

1.については、おそらく HTML でcanvasの幅と高さを設定していることが、関係しているように思うのですが、はっきりした答えが見つけられず質問させていただきました。

回答よろしくお願いします。

PS:「canvas.widthcanvas.style.widthの違いは?」の質問も読みましたが、そもそも HTML と CSS でcanvasの幅と高さを設定することは意味合いが異なるということなのでしょうか?

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(4)