refactor(renderer): extract artboard checkerboard drawing

renderer/checkerboard.ts

@@ -0,0 +1,26 @@
+import { clearScreenRect } from "./clear-rect";
+import type { ScreenRect, WebGlRendererContext } from "./types";
+
+const darkChecker = [0.82, 0.82, 0.86, 1] as const;
+const lightChecker = [0.94, 0.94, 0.97, 1] as const;
+
+export function renderCheckerboard(context: WebGlRendererContext, rect: ScreenRect, squareSize: number) {
+  const clampedSquareSize = Math.max(1, squareSize);
+  const canvasWidth = context.canvas.width;
+  const canvasHeight = context.canvas.height;
+
+  for (let py = rect.y; py < rect.y + rect.h; py += clampedSquareSize) {
+    for (let px = rect.x; px < rect.x + rect.w; px += clampedSquareSize) {
+      const x = Math.max(0, px);
+      const y = Math.max(0, py);
+      const w = Math.min(px + clampedSquareSize, rect.x + rect.w, canvasWidth) - x;
+      const h = Math.min(py + clampedSquareSize, rect.y + rect.h, canvasHeight) - y;
+      if (w <= 0 || h <= 0) continue;
+
+      const checker =
+        (Math.floor((px - rect.x) / clampedSquareSize) + Math.floor((py - rect.y) / clampedSquareSize)) % 2 === 0;
+
+      clearScreenRect(context, { x, y, w, h }, checker ? darkChecker : lightChecker);
+    }
+  }
+}