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

さて質問ですが、
以下は/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.widthとcanvas.style.widthの違いは？」の質問も読みましたが、そもそも HTML と CSS でcanvasの幅と高さを設定することは意味合いが異なるということなのでしょうか？