Resize canvas to match actual device pixels… mostly

resize.js

const observer = new ResizeObserver((entries) => {
  const entry = entries[0];

  if (entry.devicePixelContentBoxSize) {
    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
  } else if (entry.contentBoxSize) {
    // Annoying fallback. Assumes window.devicePixelRatio includes browser zoom.
    // Currently that's how it works in Chrome, but not in Safari.
    // As a result current Safari will end up with the wrong size if browser zoom is in use.
    canvas.width = Math.round(entry.contentBoxSize[0].inlineSize * window.devicePixelRatio);
    canvas.height = Math.round(entry.contentBoxSize[0].blockSize * window.devicePixelRatio);
  }

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
});

try {
  observer.observe(canvas, { box: "device-pixel-content-box" });
} catch {
  observer.observe(canvas);
}