캔버스 크기에는 픽셀 수 상한을 둔다(iOS Safari)

그리기 캔버스를 크게 확대하면 iPhone에서만 캔버스가 하얗게 비어 버린다. 오류 메시지도 없다.

캔버스의 실제 픽셀 수는 CSS 넓이 × (확대 배율 × devicePixelRatio)²이다. 고배율 화면(DPR 3)에서 확대까지 하면 금세 수천만 픽셀이 되는데, iOS Safari는 캔버스 하나에 쓸 수 있는 픽셀 수에 한도가 있어 넘으면 아무것도 그리지 않는다.

픽셀 수에 상한(예: 1,200만)을 두고, 넘으면 배율에 sqrt(상한 / 픽셀 수)를 곱해 줄여 그린다. 픽셀 수는 배율의 제곱에 비례하니 제곱근을 곱하면 딱 상한에 맞는다.

const MAX_PIXELS = 12_000_000;

function canvasScale(cssW: number, cssH: number, zoom: number): number {
  const scale = zoom * window.devicePixelRatio;
  const pixels = cssW * cssH * scale * scale;
  return pixels > MAX_PIXELS ? scale * Math.sqrt(MAX_PIXELS / pixels) : scale;
}

const s = canvasScale(rect.width, rect.height, zoom);
canvas.width = Math.floor(rect.width * s);
canvas.height = Math.floor(rect.height * s);
ctx.setTransform(s, 0, 0, s, 0, 0);

배율이 크게 줄지 않는 한 눈에 띄게 흐려지지 않는다. 빈 화면보다 조금 덜 선명한 쪽이 훨씬 낫다.