WebGL canvasの解像度を合わせる：表示サイズと描画画素を分ける

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>縦帯の解像度｜練習</title>
<style>
body { margin: 16px; font-family: sans-serif; line-height: 1.8; }
main { max-width: 600px; margin: auto; }
canvas { display: block; width: 100%; height: 200px; }
canvas[hidden] { display: none; }
button { font: inherit; margin: 4px; }
:focus-visible { outline: 3px solid #ac4300; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<h1>展示パネルの縦帯（架空の練習）</h1>
<p>図は濃紺と白の縦帯を交互に並べたものです。</p>
<canvas id="panel" role="img" aria-label="濃紺と白の縦帯">
濃紺と白の縦帯です。
</canvas>
<p id="size" role="status">描画を準備しています。</p>
<button id="redraw" type="button" disabled>寸法を再確認</button>
<button id="stop" type="button" disabled>描画を終了</button>
</main>
<script>
const canvas = document.querySelector('#panel');
const note = document.querySelector('#size');
const redraw = document.querySelector('#redraw');
const stop = document.querySelector('#stop');
const gl = canvas.getContext('webgl');
if (!gl) {
  canvas.hidden = true;
  note.textContent = 'この環境では描画できません。上の説明をご覧ください。';
} else {
  const controller = new AbortController();
  const options = { signal: controller.signal };
  function draw() {
    if (gl.isContextLost()) return;
    const cssWidth = canvas.clientWidth;
    const cssHeight = canvas.clientHeight;
    if (!cssWidth || !cssHeight) return;
    const ratio = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(cssWidth * ratio));
    const height = Math.max(1, Math.round(cssHeight * ratio));
    if (canvas.width !== width) canvas.width = width;
    if (canvas.height !== height) canvas.height = height;
    const w = gl.drawingBufferWidth, h = gl.drawingBufferHeight;
    gl.viewport(0, 0, w, h);
    gl.disable(gl.SCISSOR_TEST);
    gl.clearColor(0.08, 0.15, 0.25, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.SCISSOR_TEST);
    gl.clearColor(1, 1, 1, 1);
    const band = Math.max(1, Math.round(8 * w / cssWidth));
    for (let x = band; x < w; x += band * 2) {
      gl.scissor(x, 0, Math.min(band, w - x), h);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }
    gl.disable(gl.SCISSOR_TEST);
    note.textContent = `CSS ${cssWidth}×${cssHeight} / 描画 ${w}×${h}`;
  }
  const observer = new ResizeObserver(draw);
  observer.observe(canvas);
  window.addEventListener('resize', draw, options);
  redraw.addEventListener('click', draw, options);
  function finish(message) {
    observer.disconnect();
    controller.abort();
    canvas.hidden = true;
    redraw.disabled = stop.disabled = true;
    note.textContent = message;
  }
  canvas.addEventListener('webglcontextlost', () => {
    finish('描画を継続できません。上の説明をご覧ください。');
  }, options);
  stop.addEventListener('click', () => {
    finish('描画を終了しました。再開するにはページを読み直します。');
    gl.getExtension('WEBGL_lose_context')?.loseContext();
  }, options);
  redraw.disabled = stop.disabled = false;
  draw();
}
</script>
</body>
</html>