@canvas-harness/core 0.1.3 → 0.1.5

package/dist/index.d.cts

@@ -2097,7 +2097,13 @@ type CanvasSurface = {
     /** Device pixels — backing-store size. */
     dpr: number;
 };
-declare const getDpr: () => number;
+/**
+ * Resolved DPR for the canvas backing store. Clamped by `maxDpr`
+ * (consumer-supplied) and the absolute `HARD_MAX_DPR` ceiling. When
+ * `maxDpr` is omitted, the tier-based default (see
+ * `defaultMaxDprForSize`) is used — pass `cssW`/`cssH` to enable it.
+ */
+declare const getDpr: (maxDpr?: number, cssW?: number, cssH?: number) => number;
 /**
  * Builds a managed canvas surface. Caller pins the canvas element; we size
  * it and reset the 2d context's transform to logical-pixel space.
@@ -2105,12 +2111,12 @@ declare const getDpr: () => number;
  * Subsequent calls to `setSize` re-allocate the backing store if the new
  * `cssW × cssH × DPR` differs from the current.
  */
-declare const setupSurface: (canvas: HTMLCanvasElement) => CanvasSurface;
+declare const setupSurface: (canvas: HTMLCanvasElement, _maxDpr?: number) => CanvasSurface;
 /**
  * Resizes the surface to a new CSS-pixel size, picking up the current DPR.
  * Returns true if anything changed (caller should redraw).
  */
-declare const sizeSurface: (surface: CanvasSurface, cssW: number, cssH: number) => boolean;
+declare const sizeSurface: (surface: CanvasSurface, cssW: number, cssH: number, maxDpr?: number) => boolean;
 /**
  * Clears the entire backing store. Call before setting the camera transform.
  */
@@ -2202,6 +2208,18 @@ type RendererOptions = {
      * fill tints via globalAlpha — no parsing needed.
      */
     selectionColor?: string;
+    /**
+     * Cap on the canvas backing-store DPR (device-pixel ratio). At
+     * native DPR on hi-DPI displays, the backing buffer can hit
+     * 20-30 megapixels per frame; the GPU-upload step alone dominates
+     * the frame budget. Defaults to `1` for consistent perf across
+     * hardware. Bump to `2` (or `window.devicePixelRatio`) for
+     * pixel-crisp rendering at the cost of FPS on hi-DPI displays.
+     *
+     * Text is unaffected — the text bitmap cache renders glyphs at
+     * its own DPR-aware scale.
+     */
+    maxDpr?: number;
     /**
      * Fires when the set of custom nodes that should be rendered in the DOM
      * overlay changes. Consumers use this to mount/unmount React subtrees

package/dist/index.d.ts

@@ -2097,7 +2097,13 @@ type CanvasSurface = {
     /** Device pixels — backing-store size. */
     dpr: number;
 };
-declare const getDpr: () => number;
+/**
+ * Resolved DPR for the canvas backing store. Clamped by `maxDpr`
+ * (consumer-supplied) and the absolute `HARD_MAX_DPR` ceiling. When
+ * `maxDpr` is omitted, the tier-based default (see
+ * `defaultMaxDprForSize`) is used — pass `cssW`/`cssH` to enable it.
+ */
+declare const getDpr: (maxDpr?: number, cssW?: number, cssH?: number) => number;
 /**
  * Builds a managed canvas surface. Caller pins the canvas element; we size
  * it and reset the 2d context's transform to logical-pixel space.
@@ -2105,12 +2111,12 @@ declare const getDpr: () => number;
  * Subsequent calls to `setSize` re-allocate the backing store if the new
  * `cssW × cssH × DPR` differs from the current.
  */
-declare const setupSurface: (canvas: HTMLCanvasElement) => CanvasSurface;
+declare const setupSurface: (canvas: HTMLCanvasElement, _maxDpr?: number) => CanvasSurface;
 /**
  * Resizes the surface to a new CSS-pixel size, picking up the current DPR.
  * Returns true if anything changed (caller should redraw).
  */
-declare const sizeSurface: (surface: CanvasSurface, cssW: number, cssH: number) => boolean;
+declare const sizeSurface: (surface: CanvasSurface, cssW: number, cssH: number, maxDpr?: number) => boolean;
 /**
  * Clears the entire backing store. Call before setting the camera transform.
  */
@@ -2202,6 +2208,18 @@ type RendererOptions = {
      * fill tints via globalAlpha — no parsing needed.
      */
     selectionColor?: string;
+    /**
+     * Cap on the canvas backing-store DPR (device-pixel ratio). At
+     * native DPR on hi-DPI displays, the backing buffer can hit
+     * 20-30 megapixels per frame; the GPU-upload step alone dominates
+     * the frame budget. Defaults to `1` for consistent perf across
+     * hardware. Bump to `2` (or `window.devicePixelRatio`) for
+     * pixel-crisp rendering at the cost of FPS on hi-DPI displays.
+     *
+     * Text is unaffected — the text bitmap cache renders glyphs at
+     * its own DPR-aware scale.
+     */
+    maxDpr?: number;
     /**
      * Fires when the set of custom nodes that should be rendered in the DOM
      * overlay changes. Consumers use this to mount/unmount React subtrees

package/dist/index.js

@@ -855,23 +855,12 @@ var darkenHex = (hex) => {
 
 // src/render/shapes/path-helpers.ts
 var buildRectPath = (ctx, w, h, radius) => {
+  ctx.beginPath();
   if (radius <= 0) {
-    ctx.beginPath();
     ctx.rect(0, 0, w, h);
     return;
   }
-  const r = Math.min(radius, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(r, 0);
-  ctx.lineTo(w - r, 0);
-  ctx.quadraticCurveTo(w, 0, w, r);
-  ctx.lineTo(w, h - r);
-  ctx.quadraticCurveTo(w, h, w - r, h);
-  ctx.lineTo(r, h);
-  ctx.quadraticCurveTo(0, h, 0, h - r);
-  ctx.lineTo(0, r);
-  ctx.quadraticCurveTo(0, 0, r, 0);
-  ctx.closePath();
+  ctx.roundRect(0, 0, w, h, radius);
 };
 var buildEllipsePath = (ctx, w, h) => {
   const rx = w / 2;
@@ -4253,13 +4242,21 @@ var storeToJSON = (store) => ({
 });
 
 // src/render/canvas-setup.ts
-var MAX_DPR = 3;
-var getDpr = () => {
+var HARD_MAX_DPR = 3;
+var defaultMaxDprForSize = (cssW, cssH) => {
+  const cssPx = cssW * cssH;
+  if (cssPx >= 25e5) return 1;
+  if (cssPx >= 15e5) return 1.5;
+  return 2;
+};
+var getDpr = (maxDpr, cssW = 0, cssH = 0) => {
   if (typeof window === "undefined") return 1;
   const raw = window.devicePixelRatio || 1;
-  return Math.max(1, Math.min(MAX_DPR, raw));
+  const resolvedMax = maxDpr === void 0 && cssW > 0 && cssH > 0 ? defaultMaxDprForSize(cssW, cssH) : maxDpr ?? 1;
+  const cap = Math.max(1, Math.min(HARD_MAX_DPR, resolvedMax));
+  return Math.max(1, Math.min(cap, raw));
 };
-var setupSurface = (canvas) => {
+var setupSurface = (canvas, _maxDpr) => {
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Canvas 2d context unavailable");
   return {
@@ -4267,11 +4264,12 @@ var setupSurface = (canvas) => {
     ctx,
     cssWidth: 0,
     cssHeight: 0,
-    dpr: getDpr()
+    dpr: 1
+    // placeholder; `sizeSurface` writes the real value
   };
 };
-var sizeSurface = (surface, cssW, cssH) => {
-  const dpr = getDpr();
+var sizeSurface = (surface, cssW, cssH, maxDpr) => {
+  const dpr = getDpr(maxDpr, cssW, cssH);
   if (surface.cssWidth === cssW && surface.cssHeight === cssH && surface.dpr === dpr) {
     return false;
   }
@@ -4886,22 +4884,47 @@ var drawWithNodeTransform = (ctx, node, fn) => {
 };
 
 // src/render/renderer.ts
-var VIEWPORT_OVERSCAN_PX = 64;
+var SCENE_CACHE_MARGIN_PX = 256;
 var MIN_ON_SCREEN_SIZE_PX = 1.5;
 var MIN_READABLE_FONT_PX = 3;
 var createRenderer = (opts) => {
   const { store, theme, onOverlayChange } = opts;
+  const maxDpr = opts.maxDpr;
   const staticSurface = setupSurface(opts.staticCanvas);
   const interactiveSurface = setupSurface(opts.interactiveCanvas);
   let background = opts.background;
   let selectionColor = opts.selectionColor ?? DEFAULT_SELECTION_COLOR;
   let hideFrames = false;
-  sizeSurface(staticSurface, opts.width, opts.height);
-  sizeSurface(interactiveSurface, opts.width, opts.height);
+  sizeSurface(staticSurface, opts.width, opts.height, maxDpr);
+  sizeSurface(interactiveSurface, opts.width, opts.height, maxDpr);
   let staticDirty = true;
   let interactiveDirty = false;
   let overlaySet = /* @__PURE__ */ new Set();
   let lastDrawn = 0;
+  let cacheSurface = null;
+  let cacheCamX = 0;
+  let cacheCamY = 0;
+  let cacheCamZ = 1;
+  let cacheStale = true;
+  const ensureCacheSurface = () => {
+    const dpr = staticSurface.dpr;
+    const cssW = staticSurface.cssWidth + 2 * SCENE_CACHE_MARGIN_PX;
+    const cssH = staticSurface.cssHeight + 2 * SCENE_CACHE_MARGIN_PX;
+    if (!cacheSurface) {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas 2d context unavailable");
+      cacheSurface = { canvas, ctx, cssWidth: 0, cssHeight: 0, dpr: 1 };
+    }
+    if (cacheSurface.cssWidth !== cssW || cacheSurface.cssHeight !== cssH || cacheSurface.dpr !== dpr) {
+      cacheSurface.cssWidth = cssW;
+      cacheSurface.cssHeight = cssH;
+      cacheSurface.dpr = dpr;
+      cacheSurface.canvas.width = Math.max(1, Math.round(cssW * dpr));
+      cacheSurface.canvas.height = Math.max(1, Math.round(cssH * dpr));
+    }
+    return cacheSurface;
+  };
   let sortedNodeIdsCache = null;
   let sortedEdgeIdsCache = null;
   const invalidateSortedCaches = () => {
@@ -4910,6 +4933,7 @@ var createRenderer = (opts) => {
   };
   const requestRepaint = () => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   };
   const assetCache = createAssetCache({ onReady: requestRepaint });
@@ -4924,16 +4948,12 @@ var createRenderer = (opts) => {
       interactiveDirty = false;
     }
   };
-  const paintStatic = () => {
-    const camera = store.getCamera();
-    clearSurface(staticSurface);
-    applyCameraTransform(staticSurface, camera);
-    const scale = camera.z * staticSurface.dpr;
+  const paintSceneBody = (surface, camera, viewport, fullRender = true) => {
+    const scale = camera.z * surface.dpr;
     const interaction = store.getInteractionState();
     const excludedNodes = interaction.mode === "dragging" || interaction.mode === "resizing" ? new Set(interaction.draggedIds) : null;
     const excludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
-    const viewport = inflateRect(worldViewport(staticSurface, camera), VIEWPORT_OVERSCAN_PX);
-    paintBackground(staticSurface.ctx, { viewport, zoom: camera.z, background });
+    paintBackground(surface.ctx, { viewport, zoom: camera.z, background });
     const visible = visibleNodes(camera, viewport);
     const isMoving2 = interaction.mode === "panning" || interaction.mode === "zooming" || interaction.mode === "dragging" || interaction.mode === "resizing" || interaction.mode === "rotating";
     const minOnScreen = MIN_ON_SCREEN_SIZE_PX;
@@ -4955,8 +4975,8 @@ var createRenderer = (opts) => {
       for (const node of visible) {
         if (node.type !== "frame") continue;
         if (excludedNodes?.has(node.id)) continue;
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          paintFrameNode(staticSurface.ctx, node, scale, theme);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintFrameNode(surface.ctx, node, scale, theme);
         });
         drawn++;
       }
@@ -4969,52 +4989,53 @@ var createRenderer = (opts) => {
         const useRough = roughEnabled && (node.style?.roughness ?? 0) > 0;
         const roughReady = useRough ? getRoughCanvasCtor() !== null : false;
         const composite = isCompositePrimitive(node.type);
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
+        drawWithNodeTransform(surface.ctx, node, () => {
           if (useRough && roughReady) {
             if (composite) {
-              drawCompositeRough(staticSurface.ctx, node, camera.z, theme);
+              drawCompositeRough(surface.ctx, node, camera.z, theme);
             } else {
-              staticSurface.ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
-              drawShape(staticSurface.ctx, node, scale, theme, { skipStroke: true });
-              staticSurface.ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
-              drawRoughShape(staticSurface.ctx, node, camera.z, theme);
+              surface.ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
+              drawShape(surface.ctx, node, scale, theme, { skipStroke: true });
+              surface.ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
+              drawRoughShape(surface.ctx, node, camera.z, theme);
             }
           } else {
-            drawShape(staticSurface.ctx, node, scale, theme);
+            drawShape(surface.ctx, node, scale, theme);
             if (useRough && !roughReady) {
               onRoughReady(() => {
                 staticDirty = true;
+                cacheStale = true;
                 loop.requestFrame();
               });
             }
           }
-          if (!isEditingThis) paintNodeContent(staticSurface.ctx, node, renderEnv);
+          if (!isEditingThis) paintNodeContent(surface.ctx, node, renderEnv);
         });
         drawn++;
         continue;
       }
       if (node.type === "image") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          paintImageNode(staticSurface.ctx, node, assetCache, theme);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintImageNode(surface.ctx, node, assetCache, theme);
         });
         drawn++;
         continue;
       }
       if (node.type === "icon") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          paintIconNode(staticSurface.ctx, node, assetCache, scale, theme);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintIconNode(surface.ctx, node, assetCache, scale, theme);
         });
         drawn++;
         continue;
       }
       if (node.type === "text") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
+        drawWithNodeTransform(surface.ctx, node, () => {
           if (isEditingThis) return;
           const hasContent = node.content && node.content.trim().length > 0;
           if (hasContent) {
-            paintNodeContent(staticSurface.ctx, node, renderEnv);
+            paintNodeContent(surface.ctx, node, renderEnv);
           } else {
-            paintEmptyTextPlaceholder(staticSurface.ctx, node, camera.z);
+            paintEmptyTextPlaceholder(surface.ctx, node, camera.z);
           }
         });
         drawn++;
@@ -5026,7 +5047,7 @@ var createRenderer = (opts) => {
       if (camera.z < def.lod.minZoomForPlaceholder) continue;
       const preferCanvas = camera.z < def.lod.minZoomForReact || isMoving2;
       if (preferCanvas) {
-        if (paintCustomCanvasFallback(staticSurface.ctx, node, def, scale, renderEnv)) {
+        if (paintCustomCanvasFallback(surface.ctx, node, def, scale, renderEnv)) {
           drawn++;
         }
         continue;
@@ -5036,10 +5057,10 @@ var createRenderer = (opts) => {
         continue;
       }
       if (def.renderCanvas) {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          staticSurface.ctx.save();
-          def.renderCanvas(staticSurface.ctx, node, renderEnv);
-          staticSurface.ctx.restore();
+        drawWithNodeTransform(surface.ctx, node, () => {
+          surface.ctx.save();
+          def.renderCanvas(surface.ctx, node, renderEnv);
+          surface.ctx.restore();
         });
         drawn++;
       }
@@ -5048,15 +5069,120 @@ var createRenderer = (opts) => {
     const edgeRoughEnabled = !cameraIsMoving && movingNodeCount <= ROUGH_MAX_MOVING_NODES && camera.z >= ROUGH_MIN_ZOOM && visEdges.length <= ROUGH_MAX_NODES;
     for (const edge of visEdges) {
       if (excludedEdges?.has(edge.id)) continue;
-      paintOneEdge(staticSurface.ctx, edge, scale, edgeRoughEnabled, camera.z, isMoving2);
+      paintOneEdge(surface.ctx, edge, scale, edgeRoughEnabled, camera.z, isMoving2);
       drawn++;
     }
+    if (!fullRender) return;
     lastDrawn = drawn;
     if (!setsEqual(nextOverlaySet, overlaySet)) {
       overlaySet = nextOverlaySet;
       onOverlayChange?.([...overlaySet]);
     }
   };
+  const applyCacheTransform = (cache5, centerX, centerY, z) => {
+    const s = z * cache5.dpr;
+    const m = SCENE_CACHE_MARGIN_PX * cache5.dpr;
+    cache5.ctx.setTransform(s, 0, 0, s, -centerX * s + m, -centerY * s + m);
+  };
+  const renderFullCache = (camera) => {
+    const cache5 = ensureCacheSurface();
+    clearSurface(cache5);
+    applyCacheTransform(cache5, camera.x, camera.y, camera.z);
+    const marginWorld = SCENE_CACHE_MARGIN_PX / camera.z;
+    const viewport = inflateRect(worldViewport(staticSurface, camera), marginWorld);
+    paintSceneBody(cache5, camera, viewport);
+    cacheCamX = camera.x;
+    cacheCamY = camera.y;
+    cacheCamZ = camera.z;
+    cacheStale = false;
+  };
+  const canExtend = (camera) => {
+    if (!cacheSurface) return false;
+    const s = camera.z * staticSurface.dpr;
+    const dx = Math.abs((cacheCamX - camera.x) * s);
+    const dy = Math.abs((cacheCamY - camera.y) * s);
+    return dx < cacheSurface.canvas.width && dy < cacheSurface.canvas.height;
+  };
+  const renderCacheStrip = (cache5, centerX, centerY, z, px, py, pw, ph) => {
+    const ctx = cache5.ctx;
+    const s = z * cache5.dpr;
+    const m = SCENE_CACHE_MARGIN_PX * cache5.dpr;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.beginPath();
+    ctx.rect(px, py, pw, ph);
+    ctx.clip();
+    ctx.clearRect(px, py, pw, ph);
+    applyCacheTransform(cache5, centerX, centerY, z);
+    const viewport = {
+      x: (px - m) / s + centerX,
+      y: (py - m) / s + centerY,
+      w: pw / s,
+      h: ph / s
+    };
+    paintSceneBody(cache5, { z }, viewport, false);
+    ctx.restore();
+  };
+  const extendCache = (camera) => {
+    const cache5 = ensureCacheSurface();
+    const s = camera.z * cache5.dpr;
+    const cacheW = cache5.canvas.width;
+    const cacheH = cache5.canvas.height;
+    const dx = Math.round((cacheCamX - camera.x) * s);
+    const dy = Math.round((cacheCamY - camera.y) * s);
+    const newCamX = cacheCamX - dx / s;
+    const newCamY = cacheCamY - dy / s;
+    cache5.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    cache5.ctx.drawImage(cache5.canvas, 0, 0, cacheW, cacheH, dx, dy, cacheW, cacheH);
+    cacheCamX = newCamX;
+    cacheCamY = newCamY;
+    cacheCamZ = camera.z;
+    const hw = Math.abs(dx);
+    const vh = Math.abs(dy);
+    const hx = dx > 0 ? 0 : cacheW - hw;
+    const vy = dy > 0 ? 0 : cacheH - vh;
+    const vx = dx > 0 ? hw : 0;
+    const vw = cacheW - hw;
+    if (hw > 0) renderCacheStrip(cache5, newCamX, newCamY, camera.z, hx, 0, hw, cacheH);
+    if (vh > 0 && vw > 0) renderCacheStrip(cache5, newCamX, newCamY, camera.z, vx, vy, vw, vh);
+  };
+  const cacheSourceOffset = (camera) => {
+    const dpr = staticSurface.dpr;
+    return {
+      x: Math.round(((camera.x - cacheCamX) * cacheCamZ + SCENE_CACHE_MARGIN_PX) * dpr),
+      y: Math.round(((camera.y - cacheCamY) * cacheCamZ + SCENE_CACHE_MARGIN_PX) * dpr)
+    };
+  };
+  const viewportFitsInCache = (camera) => {
+    if (!cacheSurface) return false;
+    const { x, y } = cacheSourceOffset(camera);
+    return x >= 0 && y >= 0 && x + staticSurface.canvas.width <= cacheSurface.canvas.width && y + staticSurface.canvas.height <= cacheSurface.canvas.height;
+  };
+  const presentStatic = (camera) => {
+    const cache5 = ensureCacheSurface();
+    const w = staticSurface.canvas.width;
+    const h = staticSurface.canvas.height;
+    const { x: srcX, y: srcY } = cacheSourceOffset(camera);
+    staticSurface.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    staticSurface.ctx.clearRect(0, 0, w, h);
+    staticSurface.ctx.drawImage(cache5.canvas, srcX, srcY, w, h, 0, 0, w, h);
+  };
+  const paintStatic = () => {
+    const camera = store.getCamera();
+    if (!cacheStale && camera.z === cacheCamZ) {
+      if (viewportFitsInCache(camera)) {
+        presentStatic(camera);
+        return;
+      }
+      if (canExtend(camera)) {
+        extendCache(camera);
+        presentStatic(camera);
+        return;
+      }
+    }
+    renderFullCache(camera);
+    presentStatic(camera);
+  };
   const paintCustomCanvasFallback = (ctx, node, def, drawScale, env) => {
     if (def.getSnapshot) {
       const snap = def.getSnapshot(node, {
@@ -5341,6 +5467,7 @@ var createRenderer = (opts) => {
   const onStoreChange = () => {
     invalidateSortedCaches();
     staticDirty = true;
+    cacheStale = true;
     interactiveDirty = true;
     loop.requestFrame();
   };
@@ -5357,6 +5484,7 @@ var createRenderer = (opts) => {
     interactiveDirty = true;
     if (state.mode === "dragging" || state.mode === "resizing" || state.mode === "rotating" || state.mode === "panning" || state.mode === "zooming" || state.mode === "idle") {
       staticDirty = true;
+      cacheStale = true;
     }
     loop.requestFrame();
   };
@@ -5366,16 +5494,19 @@ var createRenderer = (opts) => {
   const unsubInteraction = store.subscribe("interaction", onInteractionChange);
   const unsubFontEpoch = subscribeFontEpoch(() => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   });
   const unsubMathEpoch = subscribeMathEpoch(() => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   });
   return {
     start() {
       loop.start();
       staticDirty = true;
+      cacheStale = true;
       interactiveDirty = isInteractive(store.getInteractionState());
       loop.requestFrame();
     },
@@ -5384,14 +5515,16 @@ var createRenderer = (opts) => {
     },
     invalidate() {
       staticDirty = true;
+      cacheStale = true;
       interactiveDirty = true;
       loop.requestFrame();
     },
     setSize(cssW, cssH) {
-      const a = sizeSurface(staticSurface, cssW, cssH);
-      const b = sizeSurface(interactiveSurface, cssW, cssH);
+      const a = sizeSurface(staticSurface, cssW, cssH, maxDpr);
+      const b = sizeSurface(interactiveSurface, cssW, cssH, maxDpr);
       if (a || b) {
         staticDirty = true;
+        cacheStale = true;
         interactiveDirty = true;
         loop.requestFrame();
       }
@@ -5399,6 +5532,7 @@ var createRenderer = (opts) => {
     setBackground(bg) {
       background = bg;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     setSelectionColor(color) {
@@ -5409,6 +5543,7 @@ var createRenderer = (opts) => {
     setHideFrames(hidden) {
       hideFrames = hidden;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     stats: () => loop.stats(),
@@ -5423,6 +5558,11 @@ var createRenderer = (opts) => {
       unsubFontEpoch();
       unsubMathEpoch();
       assetCache.dispose();
+      if (cacheSurface) {
+        cacheSurface.canvas.width = 0;
+        cacheSurface.canvas.height = 0;
+        cacheSurface = null;
+      }
     }
   };
 };