(Debugger) Don't draw the checkerboard on the canvas but add it behind

web/internal/canvas_context_details_view.js

@@ -62,56 +62,6 @@ const COLOR_CTX_PROPS = new Set(["fillStyle", "shadowColor", "strokeStyle"]);
 
 const MATHML_NS = "http://www.w3.org/1998/Math/MathML";
 
-// Cached media queries used by drawCheckerboard.
-const _prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-const _prefersHCM = window.matchMedia("(forced-colors: active)");
-
-/**
- * Draw a checkerboard pattern filling the canvas, to reveal transparency.
- * Mirrors the pattern used in src/display/editor/stamp.js.
- */
-function drawCheckerboard(ctx, width, height) {
-  const isHCM = _prefersHCM.matches;
-  const isDark = _prefersDark.matches;
-  let light, dark;
-  if (isHCM) {
-    light = "white";
-    dark = "black";
-  } else if (isDark) {
-    light = "#8f8f9d";
-    dark = "#42414d";
-  } else {
-    light = "white";
-    dark = "#cfcfd8";
-  }
-  const boxDim = 15;
-  const pattern =
-    typeof OffscreenCanvas !== "undefined"
-      ? new OffscreenCanvas(boxDim * 2, boxDim * 2)
-      : Object.assign(document.createElement("canvas"), {
-          width: boxDim * 2,
-          height: boxDim * 2,
-        });
-  const patternCtx = pattern.getContext("2d");
-  if (!patternCtx) {
-    return;
-  }
-  patternCtx.fillStyle = light;
-  patternCtx.fillRect(0, 0, boxDim * 2, boxDim * 2);
-  patternCtx.fillStyle = dark;
-  patternCtx.fillRect(0, 0, boxDim, boxDim);
-  patternCtx.fillRect(boxDim, boxDim, boxDim, boxDim);
-  ctx.save();
-  const fillPattern = ctx.createPattern(pattern, "repeat");
-  if (!fillPattern) {
-    ctx.restore();
-    return;
-  }
-  ctx.fillStyle = fillPattern;
-  ctx.fillRect(0, 0, width, height);
-  ctx.restore();
-}
-
 /**
  * Tracks and displays the CanvasRenderingContext2D graphics state for all
  * contexts created during a stepped render.
@@ -240,12 +190,6 @@ class CanvasContextDetailsView {
         return ctx;
       }
       if (!wrappedCtx) {
-        if (
-          globalThis.StepperManager._active !== null &&
-          args[0]?.alpha !== false
-        ) {
-          drawCheckerboard(ctx, canvas.width, canvas.height);
-        }
         wrappedCtx = this.wrapContext(ctx, label);
       }
       return wrappedCtx;

web/internal/debugger.html

@@ -66,7 +66,9 @@ limitations under the License.
           </div>
           <div id="canvas-scroll">
             <div id="canvas-wrapper">
-              <canvas id="render-canvas"></canvas>
+              <div class="canvas-checker">
+                <canvas id="render-canvas"></canvas>
+              </div>
               <canvas id="highlight-canvas" aria-hidden="true"></canvas>
             </div>
           </div>

web/internal/page_view.css

@@ -124,7 +124,18 @@
   color: var(--muted-color);
   font-style: italic;
 }
-.temp-canvas-wrapper canvas {
+.canvas-checker {
+  display: inline-block;
+  line-height: 0;
+  background-image: conic-gradient(
+    light-dark(#cfcfd8, #42414d) 25%,
+    light-dark(white, #8f8f9d) 25% 50%,
+    light-dark(#cfcfd8, #42414d) 50% 75%,
+    light-dark(white, #8f8f9d) 75%
+  );
+  background-size: 30px 30px;
+}
+.temp-canvas-wrapper .canvas-checker {
   border: 1px solid var(--border-subtle-color);
   zoom: calc(1 / var(--dpr, 1));
 }

web/internal/page_view.js

@@ -297,7 +297,10 @@ class PageView {
         const labelEl = document.createElement("div");
         labelEl.className = "temp-canvas-label";
         labelEl.textContent = `${ctxLabel} — ${width}×${height}`;
-        wrapper.append(labelEl, canvasAndCtx.canvas);
+        const checker = document.createElement("div");
+        checker.className = "canvas-checker";
+        checker.append(canvasAndCtx.canvas);
+        wrapper.append(labelEl, checker);
         const entry = { canvasAndCtx, wrapper, labelEl };
         this.#alive.push(entry);
         this.#attachWrapper(entry);