高DPI画面でのシャープなCanvas描画

ぼやけたCanvasの問題

デフォルトでは、<canvas>要素の内部ビットマップ解像度はCSSサイズと一致します。DPR 2のディスプレイでは、300×150のCanvasが600×300の物理ピクセルにアップスケールされ、ぼやけます。

修正方法

Canvasバッファをデバイスピクセル比に合わせてスケーリングします：

function setupHiDPICanvas(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  return ctx;
}

パフォーマンスのトレードオフ

DPR 3のCanvasはDPR 1と比べて9倍のピクセルを持ちます。アニメーションの多いCanvasでは、DPR 2で上限を設けることを検討してください：

const dpr = Math.min(window.devicePixelRatio || 1, 2);