Canvas の座標と描画

const W = 480, H = 640;
const cvs = document.getElementById("game");
const ctx = cvs.getContext("2d", { alpha: false }); // 毎フレーム全面を塗るので不透明にし、ページとの合成コストを下げる

function canvasX(e) {
  const r = cvs.getBoundingClientRect();
  return ((e.clientX - r.left) * W) / r.width;
}

// ドット 1 個を何 px で描くか。size 14 以上で 2 倍、24 以上で 3 倍…と整数倍にして、点の大きさをそろえる。
function dotScale(size) { return Math.max(1, Math.floor((size + 6) / 10)); }

// ドット文字にない文字(日本語など)を含む文は、行の中で大きさがそろうよう全体をシステムのフォントで描く。
// 英字の字形が整った等幅フォントを OS ごとに選ぶ(CSS の --mono と同じ並び)。
const SYSTEM_FONT = 'ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "JetBrains Mono", "DejaVu Sans Mono", monospace';

// 文字を描く。英数字と記号だけの文はドット文字で描く。o.spacing は文字の間に足す間隔(px)。
function drawTextOn(g, s, x, y, o = {}) {
  s = String(s);
  const size = o.size || 13, align = o.align || "center";
  g.fillStyle = o.color || "#cfd8ff";
  let n = 0;
  for (const ch of s) {
    if (!GLYPHS.has(ch)) {
      g.font = `${o.weight || 700} ${size}px ${SYSTEM_FONT}`;
      g.textAlign = align;
      g.textBaseline = "alphabetic";
      g.fillText(s, x, y);
      return;
    }
    n++;
  }
  // 揃え方から左端を決める。最後の文字の右の空き 1 列は幅に含めない。
  // 座標は整数にそろえ、点がにじまないようにする。
  const k = dotScale(size), gap = o.spacing || 0, step = GLYPH_ADVANCE * k + gap;
  const width = n * step - k - gap;
  let cx = Math.round(align === "left" ? x : align === "right" ? x - width : x - width / 2);
  const by = Math.round(y);
  // 長方形を 1 本のパスにまとめて一度に塗る(光彩も文全体に 1 回だけかかる)。
  g.beginPath();
  for (const ch of s) {
    for (const [gx, gy, gw] of GLYPHS.get(ch)) g.rect(cx + gx * k, by + (gy - GLYPH_H) * k, gw * k, k);
    cx += step;
  }
  g.fill();
}