HD画面でのキャンバスサイズリセットによる不具合の解消について

キャンバスの内容をクリアするには、2つの方法があることが分かっています。

1つ目の方法は、cearRect関数です。

context.cearRect(0,0,canvas.width,canvas.height)

2つ目の方法は、キャンバスの幅（または高さ）を元の値でリセットする方法です。

canvas.width = canvas.width
// or 
canvas.height = canvas.height

2番目の方法は、canvasの機能によって動作します。

canvas の height または width がリセットされるたびに、canvas のコンテンツはクリアされます。詳しくは https://www.w3school.com.cn/html5/att_canvas_width.asp

ある可視化プロジェクトで、一部のコンピュータの上では常に効果が間違っていることがわかりました。

デバッグの結果、問題を引き起こしていたのは "canvas.width = canvas.width" であることが判明しました。これは通常の画面では問題ないのですが、画面がHDの場合に問題となります。というのも、HDでは通常、以下のようにして描画のブレに対処しています。

function setupCanvas(canvas) {
        let width = canvas.width,
          height = canvas.height,
          dpr = window.devicePixelRatio || 1.0;
        if (dpr ! = 1.0 ) {
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
          canvas.height = height * dpr;
          canvas.width = width * dpr;
          ctx.scale(dpr, dpr);
        }
      }

HD では window.devicePixelRatio が 1 より大きいことが分かっているので、ブラシは描画前にスケーリングされます。

ctx.scale(dpr, dpr);

cavnasはステートベースの描画コンポーネントであることが分かっています。スケーリング値の1つもステートで管理されている。キャンバスの幅（と高さも）をリセットすると、キャンバスの内容がクリアされるだけでなく、描画状態もリセットされ、ブラシのスケール値が1になるため、描画がおかしくなってしまうのです。

今回の記事は以上です。皆さんの勉強のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。