ntk 5.4.0 → 6.0.1

package/lib/renderingcontext_2d.js

@@ -1,11 +1,16 @@
-import parseFontStyle from 'canvas-fontstyle';
-import extrudePolyline from 'extrude-polyline';
-
-import { safeRelease } from './cleanup.js';
-import { cssColor } from './color.js';
-import Drawable from './drawable.js';
-import { Image } from './image.js';
-import { ImageData, fromStraightRgba, pixelLayout, toStraightRgba } from './imagedata.js';
+import parseFontStyle from "canvas-fontstyle";
+import extrudePolyline from "extrude-polyline";
+
+import { safeRelease } from "./cleanup.js";
+import { cssColor } from "./color.js";
+import Drawable from "./drawable.js";
+import { Image } from "./image.js";
+import {
+  ImageData,
+  fromStraightRgba,
+  pixelLayout,
+  toStraightRgba,
+} from "./imagedata.js";
 import {
   Path2D,
   flattenPath,
@@ -15,17 +20,27 @@ import {
   matApply,
   matInvert,
   matIsIdentity,
-  matMultiply
-} from './path.js';
-import Picture from './picture.js';
-import Pixmap from './pixmap.js';
-import { routeRaster } from './rasterize.js';
-import { compositeTraps, drawGlyphRuns } from './text/glyphs.js';
-import { TextLayout } from './text/layout.js';
-import { reorderRuns } from './text/shape.js';
-import { trapezoidize } from './trapezoid.js';
-
-const DEFAULT_FONT = '20px sans-serif';
+  matMultiply,
+} from "./path.js";
+import Picture from "./picture.js";
+import Pixmap from "./pixmap.js";
+import { routeRaster } from "./rasterize.js";
+import { compositeTraps, drawGlyphRuns } from "./text/glyphs.js";
+import { TextLayout } from "./text/layout.js";
+import { reorderRuns } from "./text/shape.js";
+import { trapezoidize } from "./trapezoid.js";
+
+/** The overlap of two {x, y, w, h} boxes, or null when they have none. */
+function intersectBox(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.w, b.x + b.w);
+  const bottom = Math.min(a.y + a.h, b.y + b.h);
+  if (right <= x || bottom <= y) return null;
+  return { x, y, w: right - x, h: bottom - y };
+}
+
+const DEFAULT_FONT = "20px sans-serif";
 
 /**
  * Fallback for a context dropped without `destroy()`, matching Pixmap,
@@ -56,14 +71,14 @@ const gcRegistry = new FinalizationRegistry(({ X, gcs }) => {
 /** a fillStyle with a single colour behind it, as opposed to a gradient or a
  * caller-supplied Picture */
 function isPlainColor(style) {
-  return typeof style === 'string' || Array.isArray(style);
+  return typeof style === "string" || Array.isArray(style);
 }
 
 function isPictureSource(image) {
   return (
     image instanceof Image ||
     (image != null &&
-      typeof image.picture === 'function' &&
+      typeof image.picture === "function" &&
       Number.isFinite(image.width) &&
       Number.isFinite(image.height))
   );
@@ -73,24 +88,24 @@ function isPictureSource(image) {
 // map directly; with a clip/shape mask active the op only applies inside
 // the mask coverage (outside pixels are left untouched).
 const GCO_TO_PICTOP = {
-  'source-over': 'Over',
-  copy: 'Src',
-  'destination-over': 'OverReverse',
-  'source-in': 'In',
-  'destination-in': 'InReverse',
-  'source-out': 'Out',
-  'destination-out': 'OutReverse',
-  'source-atop': 'Atop',
-  'destination-atop': 'AtopReverse',
-  xor: 'Xor',
-  lighter: 'Add'
+  "source-over": "Over",
+  copy: "Src",
+  "destination-over": "OverReverse",
+  "source-in": "In",
+  "destination-in": "InReverse",
+  "source-out": "Out",
+  "destination-out": "OutReverse",
+  "source-atop": "Atop",
+  "destination-atop": "AtopReverse",
+  xor: "Xor",
+  lighter: "Add",
 };
 
 // extrude-polyline has no round caps/joins: 'round' extrudes as butt/bevel
 // and the missing coverage is unioned in afterwards as triangle-fan disks
 // (see _strokePolys)
-const LINE_CAP = { butt: 'butt', square: 'square', round: 'butt' };
-const LINE_JOIN = { miter: 'miter', bevel: 'bevel', round: 'bevel' };
+const LINE_CAP = { butt: "butt", square: "square", round: "butt" };
+const LINE_JOIN = { miter: "miter", bevel: "bevel", round: "bevel" };
 
 /**
  * Split a device-space polyline into dash "on" runs by arc length.
@@ -206,12 +221,12 @@ class RenderingContext2d {
     this._gc = null;
     this.picture = null;
     this._bindTarget();
-    if (typeof window.on === 'function') {
-      window.on('_backing', () => this._bindTarget());
+    if (typeof window.on === "function") {
+      window.on("_backing", () => this._bindTarget());
       // masks are sized to the drawable — recreate them after a resize
-      window.on('resize', () => this._dropMasks());
+      window.on("resize", () => this._dropMasks());
       // window-backed pictures are freed server-side with the window
-      window.on('_destroyed', () => {
+      window.on("_destroyed", () => {
         if (this.picture && this._target === this.window) {
           this.picture.forget();
           this.picture = null;
@@ -219,30 +234,29 @@ class RenderingContext2d {
       });
     }
 
-    this._solidPictures = new Map();
     this.fillMask = null;
     this.fillMaskDrawable = null;
     this.clipMask = null;
     this.clipMaskDrawable = null;
     this._textStyle = null;
     this._lastFontString = null;
-    this.textAlign = 'start';
-    this.textBaseline = 'alphabetic';
+    this.textAlign = "start";
+    this.textBaseline = "alphabetic";
 
     this._path = new Path2D();
     this._m = [1, 0, 0, 1, 0, 0];
     this._stack = [];
     this._clips = []; // [{ polys, rule }] in device space, already stacked
-    this._gco = 'source-over';
+    this._gco = "source-over";
     this.globalAlpha = 1;
-    this.lineCap = 'butt';
-    this.lineJoin = 'miter';
+    this.lineCap = "butt";
+    this.lineJoin = "miter";
     this.miterLimit = 10;
     this._lineDash = [];
     this._lineDashOffset = 0;
 
-    this.fillStyle = 'white';
-    this.strokeStyle = 'black';
+    this.fillStyle = "white";
+    this.strokeStyle = "black";
     this.lineWidth = 1;
   }
 
@@ -274,11 +288,20 @@ class RenderingContext2d {
       drawable: target,
       format,
       polyEdge: 1,
-      polyMode: 1
+      polyMode: 1,
     });
     this._dropMasks();
   }
 
+  // Undo a rectangular server-side clip. "No clip" has to be stamped as a
+  // rectangle that outlives window growth: the backing pixmap has headroom
+  // past the window and growing into it does not rebind the picture, so a
+  // restore at today's window size would keep clipping tomorrow's pixels.
+  // Coordinates are INT16 — one rect at their maximum covers any drawable.
+  _resetPictureClip() {
+    this.Render.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, 0x7fff, 0x7fff]);
+  }
+
   /**
    * Release everything this context allocated server-side. Idempotent, and
    * the context must not be drawn with afterwards.
@@ -287,10 +310,11 @@ class RenderingContext2d {
    * connection outlives both, which is why this went missing for so long (see
    * issue #156). It matters as soon as contexts are created *dynamically* —
    * one per offscreen `Surface`, say — because without it each one
-   * permanently costs a GC, a Picture, and a 1x1 pixmap per fill colour used.
+   * permanently costs a GC and a Picture.
    *
    * `_backgroundPicture` and `_glyphSource` are deliberately not freed here:
-   * both are either aliases into `_solidPictures`, already freed below, or a
+   * both are either solids owned by the app (`App#solidPicture` — shared
+   * with every other context, freed with the connection) or a
    * `Picture`/`CanvasGradient` the caller passed in through `fillStyle`,
    * which is not ours to free.
    */
@@ -311,11 +335,6 @@ class RenderingContext2d {
     this._gc = this._fillMaskGC = null;
     this._gcs.length = 0;
 
-    for (const picture of this._solidPictures.values()) {
-      picture.destroy();
-      picture._sourcePixmap?.destroy();
-    }
-    this._solidPictures.clear();
     this._backgroundPicture = this._glyphSource = null;
 
     if (this.picture) {
@@ -351,7 +370,7 @@ class RenderingContext2d {
 
   // notify a double-buffered window that its backing content changed
   _markDirty() {
-    if (typeof this.window._markDirty !== 'function') return;
+    if (typeof this.window._markDirty !== "function") return;
     // The clip bounds everything this operation could have touched, so it is
     // also the region the window has to blit. Reporting it lets the present
     // copy the part of the backing store that changed instead of all of it —
@@ -375,7 +394,7 @@ class RenderingContext2d {
   }
 
   _op() {
-    return this.Render.PictOp[GCO_TO_PICTOP[this._gco] || 'Over'];
+    return this.Render.PictOp[GCO_TO_PICTOP[this._gco] || "Over"];
   }
 
   set globalCompositeOperation(value) {
@@ -386,31 +405,21 @@ class RenderingContext2d {
     return this._gco;
   }
 
+  // solids live on the app, not the context: contexts can be as short-lived
+  // as one Surface.render call, and the colours outlive all of them
   createSolidPicture(r, g, b, a) {
-    const key = [r, g, b, a].join('|');
-    let p = this._solidPictures.get(key);
-    if (p) return p;
-
-    // TODO: use window.createPixmap
-    const pixmap = new Pixmap(this.window.app, { depth: 32, width: 1, height: 1 });
-    const pictSolidPix = this.window.X.AllocID();
-    this.Render.CreatePicture(pictSolidPix, pixmap.id, this.Render.rgba32, { repeat: 1 });
-    this.Render.FillRectangles(1, pictSolidPix, [r, g, b, a], [0, 0, 100, 100]);
-    p = new Picture(this.window.app, { id: pictSolidPix });
-    p._sourcePixmap = pixmap; // keep the 1x1 pixmap alive alongside the picture
-    this._solidPictures.set(key, p);
-    return p;
+    return this.window.app.solidPicture(r, g, b, a);
   }
 
   _stylePicture(value) {
-    if (typeof value === 'string' || Array.isArray(value)) {
+    if (typeof value === "string" || Array.isArray(value)) {
       const c = parseColor(value);
       return this.createSolidPicture(c[0], c[1], c[2], c[3]);
     }
     if (value instanceof Picture || value instanceof CanvasGradient) {
       return value;
     }
-    throw new Error('Unknown fill style');
+    throw new Error("Unknown fill style");
   }
 
   set fillStyle(value) {
@@ -476,7 +485,7 @@ class RenderingContext2d {
       textAlign: this.textAlign,
       textBaseline: this.textBaseline,
       m: this._m.slice(),
-      clips: this._clips
+      clips: this._clips,
     });
   }
 
@@ -526,9 +535,11 @@ class RenderingContext2d {
   }
 
   setTransform(a, b, c, d, e, f) {
-    if (typeof a === 'object' && a !== null) {
+    if (typeof a === "object" && a !== null) {
       const m = a;
-      this._m = Array.isArray(m) ? m.slice(0, 6) : [m.a, m.b, m.c, m.d, m.e, m.f];
+      this._m = Array.isArray(m)
+        ? m.slice(0, 6)
+        : [m.a, m.b, m.c, m.d, m.e, m.f];
       return;
     }
     if (a === undefined) return this.resetTransform();
@@ -587,13 +598,35 @@ class RenderingContext2d {
   }
 
   arc(x, y, r, startAngle, endAngle, counterclockwise = false) {
-    if (r < 0) throw new RangeError('arc: negative radius');
-    this._appendUserSegments(ellipseSegments(x, y, r, r, 0, startAngle, endAngle, counterclockwise));
+    if (r < 0) throw new RangeError("arc: negative radius");
+    this._appendUserSegments(
+      ellipseSegments(x, y, r, r, 0, startAngle, endAngle, counterclockwise),
+    );
   }
 
-  ellipse(x, y, rx, ry, rotation, startAngle, endAngle, counterclockwise = false) {
-    if (rx < 0 || ry < 0) throw new RangeError('ellipse: negative radius');
-    this._appendUserSegments(ellipseSegments(x, y, rx, ry, rotation, startAngle, endAngle, counterclockwise));
+  ellipse(
+    x,
+    y,
+    rx,
+    ry,
+    rotation,
+    startAngle,
+    endAngle,
+    counterclockwise = false,
+  ) {
+    if (rx < 0 || ry < 0) throw new RangeError("ellipse: negative radius");
+    this._appendUserSegments(
+      ellipseSegments(
+        x,
+        y,
+        rx,
+        ry,
+        rotation,
+        startAngle,
+        endAngle,
+        counterclockwise,
+      ),
+    );
   }
 
   arcTo(x1, y1, x2, y2, r) {
@@ -625,12 +658,12 @@ class RenderingContext2d {
     if (args[0] instanceof Path2D) {
       return {
         polys: flattenPath(args[0]._cmds, this._m),
-        rule: args[1] === 'evenodd' ? 'evenodd' : 'nonzero'
+        rule: args[1] === "evenodd" ? "evenodd" : "nonzero",
       };
     }
     return {
       polys: flattenPath(this._path._cmds, null),
-      rule: args[0] === 'evenodd' ? 'evenodd' : 'nonzero'
+      rule: args[0] === "evenodd" ? "evenodd" : "nonzero",
     };
   }
 
@@ -642,11 +675,11 @@ class RenderingContext2d {
     this.fillMaskDrawable = new Pixmap(this.window.app, {
       depth: 8,
       width: this.width,
-      height: this.height
+      height: this.height,
     });
     this.fillMask = new Picture(this.window.app, {
       drawable: this.fillMaskDrawable,
-      format: this.Render.a8
+      format: this.Render.a8,
     });
   }
 
@@ -655,19 +688,19 @@ class RenderingContext2d {
     this.clipMaskDrawable = new Pixmap(this.window.app, {
       depth: 8,
       width: this.width,
-      height: this.height
+      height: this.height,
     });
     this.clipMask = new Picture(this.window.app, {
       drawable: this.clipMaskDrawable,
-      format: this.Render.a8
+      format: this.Render.a8,
     });
   }
 
-  _rasterizePolys(picture, polys, rule) {
+  _rasterizePolys(picture, polys, rule, dx = 0, dy = 0) {
     const flat = [];
     for (const p of polys) if (p.pts.length >= 6) flat.push(p.pts);
     if (!flat.length) return;
-    const traps = trapezoidize(flat, 0, 0, [], rule);
+    const traps = trapezoidize(flat, dx, dy, [], rule);
     // stay under the server's maximum request size
     const chunk = 4000 * 6;
     for (let i = 0; i < traps.length; i += chunk) {
@@ -699,7 +732,8 @@ class RenderingContext2d {
   _uploadCoverage(job, b, edges) {
     const rasterizer = this.window.app.rasterizer;
     if (!rasterizer) return false;
-    if (routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy) !== 'local') return false;
+    if (routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy) !== "local")
+      return false;
 
     const coverage = rasterizer.rasterize({ ...job, width: b.w, height: b.h });
     if (!coverage) return false;
@@ -717,10 +751,24 @@ class RenderingContext2d {
     } else {
       data = Buffer.alloc(stride * b.h);
       for (let y = 0; y < b.h; ++y) {
-        Buffer.from(coverage.buffer, coverage.byteOffset + y * b.w, b.w).copy(data, y * stride);
+        Buffer.from(coverage.buffer, coverage.byteOffset + y * b.w, b.w).copy(
+          data,
+          y * stride,
+        );
       }
     }
-    this.X.PutImage(2, this.fillMaskDrawable.id, this._maskGC(), b.w, b.h, b.x, b.y, 0, 8, data);
+    this.X.PutImage(
+      2,
+      this.fillMaskDrawable.id,
+      this._maskGC(),
+      b.w,
+      b.h,
+      b.x,
+      b.y,
+      0,
+      8,
+      data,
+    );
     return true;
   }
 
@@ -802,22 +850,74 @@ class RenderingContext2d {
       flat.push(p.pts);
       edges += p.pts.length / 2;
     }
-    if (!this._uploadCoverage({ polys: flat, rule, dx: -b.x, dy: -b.y }, b, edges)) {
-      R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
+    if (
+      !this._uploadCoverage({ polys: flat, rule, dx: -b.x, dy: -b.y }, b, edges)
+    ) {
+      R.FillRectangles(
+        R.PictOp.Src,
+        this.fillMask.id,
+        [0, 0, 0, 0],
+        [b.x, b.y, b.w, b.h],
+      );
       this._rasterizePolys(this.fillMask, polys, rule);
     }
 
+    // a rectangular clip narrows where the coverage is *composited*; the
+    // mask content outside it is stale by the same argument as outside `b`.
+    // A stack whose mask was dropped by restore() may still hold a poly —
+    // _clipRect says null then, and the mask comes back on demand.
+    let out = b;
+    if (this._clips.length && !this.clipMask) {
+      const cr = this._clipRect();
+      if (cr) {
+        out = intersectBox(b, cr);
+        if (!out) return;
+      } else {
+        this._requireClipMask();
+      }
+    }
     if (alpha < 1) {
       // In with a constant color scales the a8 coverage by that alpha
-      R.FillRectangles(R.PictOp.In, this.fillMask.id, [0, 0, 0, alpha], [b.x, b.y, b.w, b.h]);
+      R.FillRectangles(
+        R.PictOp.In,
+        this.fillMask.id,
+        [0, 0, 0, alpha],
+        [out.x, out.y, out.w, out.h],
+      );
     }
     if (this.clipMask) {
       // clipMask is surface-aligned, so it is sampled at the same offset
-      R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, b.x, b.y, 0, 0, b.x, b.y, b.w, b.h);
+      R.Composite(
+        R.PictOp.In,
+        this.clipMask.id,
+        0,
+        this.fillMask.id,
+        out.x,
+        out.y,
+        0,
+        0,
+        out.x,
+        out.y,
+        out.w,
+        out.h,
+      );
     }
     // src is either a 1x1 repeating solid (offset irrelevant) or a
     // surface-aligned gradient, so it is sampled at the same offset too
-    R.Composite(op, src.id, this.fillMask.id, this.picture.id, b.x, b.y, b.x, b.y, b.x, b.y, b.w, b.h);
+    R.Composite(
+      op,
+      src.id,
+      this.fillMask.id,
+      this.picture.id,
+      out.x,
+      out.y,
+      out.x,
+      out.y,
+      out.x,
+      out.y,
+      out.w,
+      out.h,
+    );
     this._markDirty();
   }
 
@@ -828,16 +928,18 @@ class RenderingContext2d {
     const det = this._m[0] * this._m[3] - this._m[1] * this._m[2];
     const scale = Math.sqrt(Math.abs(det)) || 1;
     const thickness = this.lineWidth * scale;
-    const roundCap = this.lineCap === 'round';
-    const roundJoin = this.lineJoin === 'round';
+    const roundCap = this.lineCap === "round";
+    const roundJoin = this.lineJoin === "round";
     const stroke = extrudePolyline({
       thickness,
-      cap: LINE_CAP[this.lineCap] || 'butt',
-      join: LINE_JOIN[this.lineJoin] || 'miter',
-      miterLimit: this.miterLimit
+      cap: LINE_CAP[this.lineCap] || "butt",
+      join: LINE_JOIN[this.lineJoin] || "miter",
+      miterLimit: this.miterLimit,
     });
     // dash distances are user-space lengths; scale them like the line width
-    const dash = this._lineDash.length ? this._lineDash.map((d) => d * scale) : null;
+    const dash = this._lineDash.length
+      ? this._lineDash.map((d) => d * scale)
+      : null;
     const dashOffset = this._lineDashOffset * scale;
 
     const tris = [];
@@ -867,7 +969,9 @@ class RenderingContext2d {
       const l1 = Math.hypot(b[0] - a[0], b[1] - a[1]);
       const l2 = Math.hypot(c[0] - b[0], c[1] - b[1]);
       if (!l1 || !l2) return;
-      let dot = ((b[0] - a[0]) * (c[0] - b[0]) + (b[1] - a[1]) * (c[1] - b[1])) / (l1 * l2);
+      let dot =
+        ((b[0] - a[0]) * (c[0] - b[0]) + (b[1] - a[1]) * (c[1] - b[1])) /
+        (l1 * l2);
       dot = Math.max(-1, Math.min(1, dot));
       // bevel-to-arc gap depth for turn angle θ: r * (1 - cos(θ/2))
       if (r * (1 - Math.sqrt((1 + dot) / 2)) > 0.05) addDisk(b[0], b[1]);
@@ -888,9 +992,11 @@ class RenderingContext2d {
         }
       }
       if (roundJoin) {
-        for (let i = 1; i < pts.length - 1; i++) maybeJoinDisk(pts[i - 1], pts[i], pts[i + 1]);
+        for (let i = 1; i < pts.length - 1; i++)
+          maybeJoinDisk(pts[i - 1], pts[i], pts[i + 1]);
         // the seam of a closed loop is a join too (pts[0] === pts[last])
-        if (closed && pts.length > 2) maybeJoinDisk(pts[pts.length - 2], pts[0], pts[1]);
+        if (closed && pts.length > 2)
+          maybeJoinDisk(pts[pts.length - 2], pts[0], pts[1]);
       }
       if (roundCap && !closed) {
         addDisk(pts[0][0], pts[0][1]);
@@ -903,7 +1009,8 @@ class RenderingContext2d {
       for (let i = 1; i < run.length; i++) {
         const p = run[i];
         const q = out[out.length - 1];
-        if (Math.abs(p[0] - q[0]) > 1e-6 || Math.abs(p[1] - q[1]) > 1e-6) out.push(p);
+        if (Math.abs(p[0] - q[0]) > 1e-6 || Math.abs(p[1] - q[1]) > 1e-6)
+          out.push(p);
       }
       return out;
     };
@@ -924,7 +1031,8 @@ class RenderingContext2d {
       }
       if (pts.length >= 2 && poly.closed) {
         const [fx, fy] = pts[0];
-        if (Math.abs(fx - lx) > 1e-6 || Math.abs(fy - ly) > 1e-6) pts.push([fx, fy]);
+        if (Math.abs(fx - lx) > 1e-6 || Math.abs(fy - ly) > 1e-6)
+          pts.push([fx, fy]);
       }
       if (pts.length < 2) continue;
 
@@ -947,11 +1055,23 @@ class RenderingContext2d {
     // round-cap/join disks overlap the stroke body; overlapping coverage
     // must accumulate in the clamped a8 mask (single composite) or a
     // semi-transparent stroke style would double-blend at the overlaps
-    const direct = !hasRound && this.globalAlpha >= 1 && !this.clipMask && op === this.Render.PictOp.Over;
+    const direct =
+      !hasRound &&
+      this.globalAlpha >= 1 &&
+      !this._clips.length &&
+      op === this.Render.PictOp.Over;
     const chunk = 4000 * 6;
     if (direct) {
       for (let i = 0; i < tris.length; i += chunk) {
-        this.Render.Triangles(op, src.id, 0, 0, this.picture.id, this.Render.a8, tris.slice(i, i + chunk));
+        this.Render.Triangles(
+          op,
+          src.id,
+          0,
+          0,
+          this.picture.id,
+          this.Render.a8,
+          tris.slice(i, i + chunk),
+        );
       }
       this._markDirty();
       return;
@@ -970,20 +1090,80 @@ class RenderingContext2d {
     this._ensureFillMask();
     const b = this._trisBBox(tris);
     if (!b) return;
-    if (!this._uploadCoverage({ triangles: tris, dx: -b.x, dy: -b.y }, b, tris.length / 2)) {
-      this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
+    if (
+      !this._uploadCoverage(
+        { triangles: tris, dx: -b.x, dy: -b.y },
+        b,
+        tris.length / 2,
+      )
+    ) {
+      this.Render.FillRectangles(
+        this.Render.PictOp.Src,
+        this.fillMask.id,
+        [0, 0, 0, 0],
+        [b.x, b.y, b.w, b.h],
+      );
       const opaque = this.createSolidPicture(0, 0, 0, 1);
       for (let i = 0; i < tris.length; i += chunk) {
-        this.Render.Triangles(this.Render.PictOp.Add, opaque.id, 0, 0, this.fillMask.id, this.Render.a8, tris.slice(i, i + chunk));
+        this.Render.Triangles(
+          this.Render.PictOp.Add,
+          opaque.id,
+          0,
+          0,
+          this.fillMask.id,
+          this.Render.a8,
+          tris.slice(i, i + chunk),
+        );
+      }
+    }
+    let out = b;
+    if (this._clips.length && !this.clipMask) {
+      const cr = this._clipRect();
+      if (cr) {
+        out = intersectBox(b, cr);
+        if (!out) return;
+      } else {
+        this._requireClipMask();
       }
     }
     if (this.globalAlpha < 1) {
-      this.Render.FillRectangles(this.Render.PictOp.In, this.fillMask.id, [0, 0, 0, this.globalAlpha], [b.x, b.y, b.w, b.h]);
+      this.Render.FillRectangles(
+        this.Render.PictOp.In,
+        this.fillMask.id,
+        [0, 0, 0, this.globalAlpha],
+        [out.x, out.y, out.w, out.h],
+      );
     }
     if (this.clipMask) {
-      this.Render.Composite(this.Render.PictOp.In, this.clipMask.id, 0, this.fillMask.id, b.x, b.y, 0, 0, b.x, b.y, b.w, b.h);
+      this.Render.Composite(
+        this.Render.PictOp.In,
+        this.clipMask.id,
+        0,
+        this.fillMask.id,
+        out.x,
+        out.y,
+        0,
+        0,
+        out.x,
+        out.y,
+        out.w,
+        out.h,
+      );
     }
-    this.Render.Composite(op, src.id, this.fillMask.id, this.picture.id, b.x, b.y, b.x, b.y, b.x, b.y, b.w, b.h);
+    this.Render.Composite(
+      op,
+      src.id,
+      this.fillMask.id,
+      this.picture.id,
+      out.x,
+      out.y,
+      out.x,
+      out.y,
+      out.x,
+      out.y,
+      out.w,
+      out.h,
+    );
     this._markDirty();
   }
 
@@ -1000,7 +1180,7 @@ class RenderingContext2d {
   drawGlyphs(op, src, positioned) {
     const app = this.window.app;
     const R = this.Render;
-    if (!this.clipMask) {
+    if (!this._clips.length) {
       drawGlyphRuns(app, op, src.id, this.picture.id, positioned);
       this._markDirty();
       return;
@@ -1012,19 +1192,62 @@ class RenderingContext2d {
     const rect = this._clipRect();
     if (rect) {
       if (rect.w === 0 || rect.h === 0) return;
-      R.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+        rect.x,
+        rect.y,
+        rect.w,
+        rect.h,
+      ]);
       drawGlyphRuns(app, op, src.id, this.picture.id, positioned);
-      R.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+      this._resetPictureClip();
       this._markDirty();
       return;
     }
+    const clipMask = this._requireClipMask();
     this._ensureFillMask();
     this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
-    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
+    R.FillRectangles(
+      R.PictOp.Src,
+      this.fillMask.id,
+      [0, 0, 0, 0],
+      [0, 0, this.width, this.height],
+    );
     // solid white through the glyphs leaves their coverage in the a8 mask
-    drawGlyphRuns(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, positioned);
-    R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
-    R.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    drawGlyphRuns(
+      app,
+      R.PictOp.Over,
+      this._glyphSource.id,
+      this.fillMask.id,
+      positioned,
+    );
+    R.Composite(
+      R.PictOp.In,
+      clipMask.id,
+      0,
+      this.fillMask.id,
+      0,
+      0,
+      0,
+      0,
+      0,
+      0,
+      this.width,
+      this.height,
+    );
+    R.Composite(
+      op,
+      src.id,
+      this.fillMask.id,
+      this.picture.id,
+      0,
+      0,
+      0,
+      0,
+      0,
+      0,
+      this.width,
+      this.height,
+    );
     this._markDirty();
   }
 
@@ -1038,7 +1261,7 @@ class RenderingContext2d {
     if (!traps.length) return;
     const app = this.window.app;
     const R = this.Render;
-    if (!this.clipMask) {
+    if (!this._clips.length) {
       compositeTraps(app, op, src.id, this.picture.id, traps);
       this._markDirty();
       return;
@@ -1046,29 +1269,93 @@ class RenderingContext2d {
     const rect = this._clipRect();
     if (rect) {
       if (rect.w === 0 || rect.h === 0) return;
-      R.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+        rect.x,
+        rect.y,
+        rect.w,
+        rect.h,
+      ]);
       compositeTraps(app, op, src.id, this.picture.id, traps);
-      R.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+      this._resetPictureClip();
       this._markDirty();
       return;
     }
+    const clipMask = this._requireClipMask();
     this._ensureFillMask();
     this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
-    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-    compositeTraps(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, traps);
-    R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
-    R.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    R.FillRectangles(
+      R.PictOp.Src,
+      this.fillMask.id,
+      [0, 0, 0, 0],
+      [0, 0, this.width, this.height],
+    );
+    compositeTraps(
+      app,
+      R.PictOp.Over,
+      this._glyphSource.id,
+      this.fillMask.id,
+      traps,
+    );
+    R.Composite(
+      R.PictOp.In,
+      clipMask.id,
+      0,
+      this.fillMask.id,
+      0,
+      0,
+      0,
+      0,
+      0,
+      0,
+      this.width,
+      this.height,
+    );
+    R.Composite(
+      op,
+      src.id,
+      this.fillMask.id,
+      this.picture.id,
+      0,
+      0,
+      0,
+      0,
+      0,
+      0,
+      this.width,
+      this.height,
+    );
     this._markDirty();
   }
 
   // combined clip ∩ globalAlpha mask for direct composites (rect/image
   // fast paths); returns a picture id or 0. Reuses the fill scratch mask.
   _compositeMask() {
-    if (this.globalAlpha >= 1) return this.clipMask ? this.clipMask.id : 0;
+    // reached only when the clip is not a rectangle (those went through the
+    // SetPictureClipRectangles path), so a clip here always means the mask
+    const clipMask = this._clips.length ? this._requireClipMask() : null;
+    if (this.globalAlpha >= 1) return clipMask ? clipMask.id : 0;
     this._ensureFillMask();
-    this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, this.globalAlpha], [0, 0, this.width, this.height]);
-    if (this.clipMask) {
-      this.Render.Composite(this.Render.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this.Render.FillRectangles(
+      this.Render.PictOp.Src,
+      this.fillMask.id,
+      [0, 0, 0, this.globalAlpha],
+      [0, 0, this.width, this.height],
+    );
+    if (clipMask) {
+      this.Render.Composite(
+        this.Render.PictOp.In,
+        clipMask.id,
+        0,
+        this.fillMask.id,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        this.width,
+        this.height,
+      );
     }
     return this.fillMask.id;
   }
@@ -1077,8 +1364,13 @@ class RenderingContext2d {
   // drawing
 
   clearRect(x, y, w, h) {
-    if (matIsIdentity(this._m) && !this.clipMask) {
-      this.Render.FillRectangles(this.Render.PictOp.Src, this.picture.id, [1, 1, 1, 1], [x, y, w, h]);
+    if (matIsIdentity(this._m) && !this._clips.length) {
+      this.Render.FillRectangles(
+        this.Render.PictOp.Src,
+        this.picture.id,
+        [1, 1, 1, 1],
+        [x, y, w, h],
+      );
       this._markDirty();
       return;
     }
@@ -1086,10 +1378,10 @@ class RenderingContext2d {
     tmp.rect(x, y, w, h);
     // clear = opaque white, ignoring alpha and the composite op (but
     // honoring the clip), matching the identity fast path above
-    this._fillPolys(flattenPath(tmp._cmds, this._m), 'nonzero', {
+    this._fillPolys(flattenPath(tmp._cmds, this._m), "nonzero", {
       src: this.createSolidPicture(1, 1, 1, 1),
       op: this.Render.PictOp.Over,
-      alpha: 1
+      alpha: 1,
     });
   }
 
@@ -1101,17 +1393,21 @@ class RenderingContext2d {
         this._backgroundPicture.id,
         mask,
         this.picture.id,
-        x, y,
-        x, y,
-        x, y,
-        w, h
+        x,
+        y,
+        x,
+        y,
+        x,
+        y,
+        w,
+        h,
       );
       this._markDirty();
       return;
     }
     const tmp = new Path2D();
     tmp.rect(x, y, w, h);
-    this._fillPolys(flattenPath(tmp._cmds, this._m), 'nonzero');
+    this._fillPolys(flattenPath(tmp._cmds, this._m), "nonzero");
   }
 
   strokeRect(x, y, w, h) {
@@ -1166,7 +1462,12 @@ class RenderingContext2d {
     // rather than quietly changing what they look like.
     const integral = (v) => Math.abs(v - Math.round(v)) < 1e-6;
     if (![x, y, w, h].every(integral)) return null;
-    return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
+    return {
+      x: Math.round(x),
+      y: Math.round(y),
+      w: Math.round(w),
+      h: Math.round(h),
+    };
   }
 
   /** Intersection of the whole clip stack, or null if any part is not a
@@ -1201,15 +1502,66 @@ class RenderingContext2d {
     // copy-on-write: earlier save() snapshots keep their own clip list
     this._clips = this._clips.concat([entry]);
 
-    if (this._clips.length === 1) {
-      this._ensureClipMask();
-      this.Render.FillRectangles(this.Render.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-      this._rasterizePolys(this.clipMask, polys, rule);
+    // A stack of rectangles stays virtual: consumers apply the intersected
+    // rectangle server-side (SetPictureClipRectangles, bounded composites),
+    // and no a8 mask — no window-sized pixmap, no AddTraps — ever exists.
+    // That is the common case by a wide margin: a renderer clipping to a
+    // damage rect, a viewport and a cell nests rectangles three deep before
+    // the first rounded corner appears. The mask materializes on the first
+    // entry that is not a rectangle, and stays in sync from then on.
+    if (!this.clipMask) {
+      if (entry.rect) return;
+      this._materializeClipMask();
       return;
     }
     this._intersectClip(entry);
   }
 
+  /**
+   * Build the a8 mask from the whole clip stack, on first demand. Rect
+   * entries are plain fills; only genuinely non-rectangular entries
+   * rasterize, and those through `_applyPolyClip`, which keeps the
+   * trapezoid work off the window-sized mask itself.
+   */
+  _materializeClipMask() {
+    const R = this.Render;
+    this._ensureClipMask();
+    R.FillRectangles(
+      R.PictOp.Src,
+      this.clipMask.id,
+      [0, 0, 0, 0],
+      [0, 0, this.width, this.height],
+    );
+    const first = this._clips[0];
+    if (first.rect) {
+      const r = first.rect;
+      const x = Math.max(0, Math.min(r.x, this.width));
+      const y = Math.max(0, Math.min(r.y, this.height));
+      const right = Math.max(x, Math.min(r.x + r.w, this.width));
+      const bottom = Math.max(y, Math.min(r.y + r.h, this.height));
+      if (right > x && bottom > y) {
+        R.FillRectangles(
+          R.PictOp.Src,
+          this.clipMask.id,
+          [0, 0, 0, 1],
+          [x, y, right - x, bottom - y],
+        );
+      }
+    } else {
+      this._applyPolyClip(first, R.PictOp.Src);
+    }
+    for (let i = 1; i < this._clips.length; i++)
+      this._intersectClip(this._clips[i]);
+  }
+
+  /** The live mask, built if the stack has not needed one yet. Callers on
+   * the rectangle fast paths never get here; a rect-only stack only
+   * materializes when a consumer genuinely has no cheaper way in. */
+  _requireClipMask() {
+    if (!this.clipMask) this._materializeClipMask();
+    return this.clipMask;
+  }
+
   // rasterize one clip entry into a temp a8 and In-composite it onto the mask
   _intersectClip(entry) {
     // Intersecting with a *rectangle* is just "keep the inside, clear the
@@ -1236,32 +1588,97 @@ class RenderingContext2d {
         outside.push(right, y, this.width - right, bottom - y);
       }
       if (outside.length) {
-        this.Render.FillRectangles(this.Render.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], outside);
+        this.Render.FillRectangles(
+          this.Render.PictOp.Src,
+          this.clipMask.id,
+          [0, 0, 0, 0],
+          outside,
+        );
       }
       return;
     }
-    const tmpPixmap = new Pixmap(this.window.app, { depth: 8, width: this.width, height: this.height });
-    const tmpMask = new Picture(this.window.app, { drawable: tmpPixmap, format: this.Render.a8 });
-    this.Render.FillRectangles(this.Render.PictOp.Src, tmpMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-    this._rasterizePolys(tmpMask, entry.polys, entry.rule);
-    this.Render.Composite(this.Render.PictOp.In, tmpMask.id, 0, this.clipMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this._applyPolyClip(entry, this.Render.PictOp.In);
+  }
+
+  /**
+   * Rasterize one non-rectangular clip entry and combine it onto the mask:
+   * `Src` writes a fresh mask (everything outside was just cleared), `In`
+   * intersects a live one. The trapezoids land in a temp sized to the
+   * entry's bounding box, never on the window-sized mask — on glamor an
+   * AddTraps is a software fallback that maps its whole target pixmap, so
+   * the target's size *is* the cost. Everything outside the box is cleared
+   * with plain fills: outside the entry the mask is zero by definition.
+   */
+  _applyPolyClip(entry, op) {
+    const R = this.Render;
+    const bb = this._polysBBox(entry.polys);
+    if (!bb || bb.w <= 0 || bb.h <= 0) {
+      R.FillRectangles(
+        R.PictOp.Src,
+        this.clipMask.id,
+        [0, 0, 0, 0],
+        [0, 0, this.width, this.height],
+      );
+      return;
+    }
+    if (op === R.PictOp.In) {
+      const outside = [];
+      if (bb.y > 0) outside.push(0, 0, this.width, bb.y);
+      if (bb.y + bb.h < this.height) {
+        outside.push(0, bb.y + bb.h, this.width, this.height - (bb.y + bb.h));
+      }
+      if (bb.x > 0) outside.push(0, bb.y, bb.x, bb.h);
+      if (bb.x + bb.w < this.width) {
+        outside.push(bb.x + bb.w, bb.y, this.width - (bb.x + bb.w), bb.h);
+      }
+      if (outside.length) {
+        R.FillRectangles(R.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], outside);
+      }
+    }
+    const tmpPixmap = new Pixmap(this.window.app, {
+      depth: 8,
+      width: bb.w,
+      height: bb.h,
+    });
+    const tmpMask = new Picture(this.window.app, {
+      drawable: tmpPixmap,
+      format: R.a8,
+    });
+    R.FillRectangles(
+      R.PictOp.Src,
+      tmpMask.id,
+      [0, 0, 0, 0],
+      [0, 0, bb.w, bb.h],
+    );
+    this._rasterizePolys(tmpMask, entry.polys, entry.rule, -bb.x, -bb.y);
+    R.Composite(
+      op,
+      tmpMask.id,
+      0,
+      this.clipMask.id,
+      0,
+      0,
+      0,
+      0,
+      bb.x,
+      bb.y,
+      bb.w,
+      bb.h,
+    );
     tmpMask.destroy();
     tmpPixmap.destroy();
   }
 
   _rebuildClipMask() {
-    if (!this._clips.length) {
-      if (this.clipMask) {
-        this.clipMask.destroy();
-        this.clipMaskDrawable.destroy();
-        this.clipMask = this.clipMaskDrawable = null;
-      }
-      return;
+    // The stack changed shape (restore, resize): drop the mask rather than
+    // rebuild it eagerly. A stack that went back to rectangles never needs
+    // one again, and one that still holds a poly rebuilds on first demand
+    // through _requireClipMask — same work, paid only if something draws.
+    if (this.clipMask) {
+      this.clipMask.destroy();
+      this.clipMaskDrawable.destroy();
+      this.clipMask = this.clipMaskDrawable = null;
     }
-    this._ensureClipMask();
-    this.Render.FillRectangles(this.Render.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-    this._rasterizePolys(this.clipMask, this._clips[0].polys, this._clips[0].rule);
-    for (let i = 1; i < this._clips.length; i++) this._intersectClip(this._clips[i]);
   }
 
   isPointInPath(...args) {
@@ -1272,8 +1689,15 @@ class RenderingContext2d {
       rest = args.slice(1);
     }
     const [x, y, rule] = rest;
-    const polys = path ? flattenPath(path._cmds, this._m) : flattenPath(this._path._cmds, null);
-    return polysContain(polys, x, y, rule === 'evenodd' ? 'evenodd' : 'nonzero');
+    const polys = path
+      ? flattenPath(path._cmds, this._m)
+      : flattenPath(this._path._cmds, null);
+    return polysContain(
+      polys,
+      x,
+      y,
+      rule === "evenodd" ? "evenodd" : "nonzero",
+    );
   }
 
   // ------------------------------------------------------------------
@@ -1287,24 +1711,24 @@ class RenderingContext2d {
   // horizontal offset of the alignment point, given the shaped width
   _alignOffset(shaped) {
     let align = this.textAlign;
-    if (align === 'start') align = shaped.baseLevel & 1 ? 'right' : 'left';
-    if (align === 'end') align = shaped.baseLevel & 1 ? 'left' : 'right';
-    if (align === 'center') return -shaped.width / 2;
-    if (align === 'right') return -shaped.width;
+    if (align === "start") align = shaped.baseLevel & 1 ? "right" : "left";
+    if (align === "end") align = shaped.baseLevel & 1 ? "left" : "right";
+    if (align === "center") return -shaped.width / 2;
+    if (align === "right") return -shaped.width;
     return 0;
   }
 
   // vertical distance from the requested y to the baseline
   _baselineOffset(metrics) {
     switch (this.textBaseline) {
-      case 'top':
+      case "top":
         return metrics.ascent;
-      case 'hanging':
+      case "hanging":
         return metrics.ascent * 0.8;
-      case 'middle':
+      case "middle":
         return (metrics.ascent - metrics.descent) / 2;
-      case 'bottom':
-      case 'ideographic':
+      case "bottom":
+      case "ideographic":
         return -metrics.descent;
       default:
         // 'alphabetic'
@@ -1323,11 +1747,13 @@ class RenderingContext2d {
    * font via `ctx.font` instead).
    */
   fillText(text, x, y) {
-    text = String(text ?? '');
+    text = String(text ?? "");
     if (!text) return;
     const style = this._resolvedTextStyle();
     const app = this.window.app;
-    const shaped = app.fonts.shape(text, style);
+    // through the shaping memo TextLayout uses: a label repainted every
+    // frame shapes once, not once per frame
+    const shaped = app.fonts._shapeCachedWhole(text, style);
     const [tx, ty] = matApply(this._m, x, y);
     const ox = tx + this._alignOffset(shaped);
     const oy = ty + this._baselineOffset(style.font.metrics(style.size));
@@ -1338,7 +1764,11 @@ class RenderingContext2d {
       positioned.push({ run, x: cursor, y: oy });
       cursor += run.width;
     }
-    this.drawGlyphs(this.Render.PictOp.Over, this._backgroundPicture, positioned);
+    this.drawGlyphs(
+      this.Render.PictOp.Over,
+      this._backgroundPicture,
+      positioned,
+    );
   }
 
   /**
@@ -1348,7 +1778,7 @@ class RenderingContext2d {
    */
   measureText(text) {
     const style = this._resolvedTextStyle();
-    const shaped = this.window.app.fonts.shape(String(text ?? ''), style);
+    const shaped = this.window.app.fonts.shape(String(text ?? ""), style);
     let minX = 0;
     let maxX = 0;
     let minY = 0;
@@ -1378,7 +1808,7 @@ class RenderingContext2d {
       emHeightAscent: m.ascent,
       emHeightDescent: m.descent,
       // legacy ntk field: ink height
-      height: maxY - minY
+      height: maxY - minY,
     };
   }
 
@@ -1402,14 +1832,14 @@ class RenderingContext2d {
    * `app.fonts.load()` win over system (fontconfig) lookup.
    */
   set font(val) {
-    if (!val || typeof val !== 'string') return;
+    if (!val || typeof val !== "string") return;
     const parsed = parseFontStyle(val);
     if (!parsed) return;
     const style = {
       family: parsed.family,
       weight: parsed.weight,
       style: parsed.style,
-      size: parsed.size
+      size: parsed.size,
     };
     style.font = this.window.app.fonts.match(style.family, style);
     this._lastFontString = val;
@@ -1424,20 +1854,23 @@ class RenderingContext2d {
   // gradients / images
 
   createLinearGradient(x0, y0, x1, y1) {
-    return new CanvasGradient('linear', this, x0, y0, x1, y1);
+    return new CanvasGradient("linear", this, x0, y0, x1, y1);
   }
 
   createRadialGradient(x0, y0, r0, x1, y1, r1) {
-    return new CanvasGradient('radial', this, x0, y0, x1, y1, r0, r1);
+    return new CanvasGradient("radial", this, x0, y0, x1, y1, r0, r1);
   }
 
   createConicalGradient(x0, y0, angle) {
-    return new CanvasGradient('conical', this, x0, y0, angle);
+    return new CanvasGradient("conical", this, x0, y0, angle);
   }
 
   /** the pixel layout of whatever this context currently draws into */
   get _layout() {
-    const depth = this._target.depth ?? this.window.depth ?? this.display.screen[0].root_depth;
+    const depth =
+      this._target.depth ??
+      this.window.depth ??
+      this.display.screen[0].root_depth;
     if (!this._layoutCache || this._layoutCache.depth !== depth) {
       this._layoutCache = pixelLayout(this.display, depth);
     }
@@ -1451,9 +1884,12 @@ class RenderingContext2d {
    *   createImageData(imagedata)
    */
   createImageData(a, b) {
-    if (typeof a === 'number') return new ImageData(a, b);
-    if (a && typeof a.width === 'number' && a.data) return new ImageData(a.width, a.height);
-    throw new TypeError('createImageData: pass (width, height) or an ImageData');
+    if (typeof a === "number") return new ImageData(a, b);
+    if (a && typeof a.width === "number" && a.data)
+      return new ImageData(a.width, a.height);
+    throw new TypeError(
+      "createImageData: pass (width, height) or an ImageData",
+    );
   }
 
   /**
@@ -1469,14 +1905,20 @@ class RenderingContext2d {
     const src = data.data;
     if (!src || src.length !== width * height * 4) {
       throw new Error(
-        `putImageData: data must be ${width * height * 4} RGBA bytes for ${width}x${height}`
+        `putImageData: data must be ${width * height * 4} RGBA bytes for ${width}x${height}`,
       );
     }
     dirtyWidth ??= width;
     dirtyHeight ??= height;
     // the spec normalises negative extents by moving the origin
-    if (dirtyWidth < 0) { dirtyX += dirtyWidth; dirtyWidth = -dirtyWidth; }
-    if (dirtyHeight < 0) { dirtyY += dirtyHeight; dirtyHeight = -dirtyHeight; }
+    if (dirtyWidth < 0) {
+      dirtyX += dirtyWidth;
+      dirtyWidth = -dirtyWidth;
+    }
+    if (dirtyHeight < 0) {
+      dirtyY += dirtyHeight;
+      dirtyHeight = -dirtyHeight;
+    }
     const sx = Math.max(0, dirtyX);
     const sy = Math.max(0, dirtyY);
     const sw = Math.min(width, dirtyX + dirtyWidth) - sx;
@@ -1488,8 +1930,11 @@ class RenderingContext2d {
       const cropped = new Uint8ClampedArray(sw * sh * 4);
       for (let row = 0; row < sh; row++) {
         cropped.set(
-          src.subarray((sy + row) * width * 4 + sx * 4, (sy + row) * width * 4 + (sx + sw) * 4),
-          row * sw * 4
+          src.subarray(
+            (sy + row) * width * 4 + sx * 4,
+            (sy + row) * width * 4 + (sx + sw) * 4,
+          ),
+          row * sw * 4,
         );
       }
       rgba = cropped;
@@ -1507,11 +1952,13 @@ class RenderingContext2d {
         2, // ZPixmap
         this._target.id,
         this._gc,
-        sw, rows,
-        x + sx, y + sy + row,
+        sw,
+        rows,
+        x + sx,
+        y + sy + row,
         0,
         layout.depth,
-        bytes.subarray(row * stride, (row + rows) * stride)
+        bytes.subarray(row * stride, (row + rows) * stride),
       );
     }
     this._markDirty();
@@ -1531,9 +1978,9 @@ class RenderingContext2d {
    */
   getImageData(x, y, w, h, cb) {
     const promise = this.readPixels(x, y, w, h).then(
-      (raw) => new ImageData(toStraightRgba(raw.data, raw.layout, w, h), w, h)
+      (raw) => new ImageData(toStraightRgba(raw.data, raw.layout, w, h), w, h),
     );
-    if (typeof cb === 'function') {
+    if (typeof cb === "function") {
       promise.then((data) => cb(null, data), cb);
       return undefined;
     }
@@ -1561,10 +2008,19 @@ class RenderingContext2d {
   readPixels(x, y, w, h) {
     const layout = this._layout;
     return new Promise((resolve, reject) => {
-      this.X.GetImage(2, this._target.id, x, y, w, h, 0xffffffff, (err, img) => {
-        if (err) return reject(err);
-        resolve({ width: w, height: h, data: img.data, layout, ...layout });
-      });
+      this.X.GetImage(
+        2,
+        this._target.id,
+        x,
+        y,
+        w,
+        h,
+        0xffffffff,
+        (err, img) => {
+          if (err) return reject(err);
+          resolve({ width: w, height: h, data: img.data, layout, ...layout });
+        },
+      );
     });
   }
 
@@ -1594,18 +2050,27 @@ class RenderingContext2d {
    * picture is the same thing to the server, with no pixel work at all.
    */
   _beginDirectComposite() {
-    const rect = this.clipMask ? this._clipRect() : null;
-    if (!rect) return { mask: this._compositeMask(), clipped: false, empty: false };
-    if (rect.w === 0 || rect.h === 0) return { mask: 0, clipped: false, empty: true };
-    this.Render.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+    const rect = this._clips.length ? this._clipRect() : null;
+    if (!rect)
+      return { mask: this._compositeMask(), clipped: false, empty: false };
+    if (rect.w === 0 || rect.h === 0)
+      return { mask: 0, clipped: false, empty: true };
+    this.Render.SetPictureClipRectangles(this.picture.id, 0, 0, [
+      rect.x,
+      rect.y,
+      rect.w,
+      rect.h,
+    ]);
     const mask =
-      this.globalAlpha >= 1 ? 0 : this.createSolidPicture(0, 0, 0, this.globalAlpha).id;
+      this.globalAlpha >= 1
+        ? 0
+        : this.createSolidPicture(0, 0, 0, this.globalAlpha).id;
     return { mask, clipped: true, empty: false };
   }
 
   _endDirectComposite(state) {
     if (!state.clipped) return;
-    this.Render.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+    this._resetPictureClip();
   }
 
   /** The source colour for a coverage composite, with `globalAlpha` folded
@@ -1615,7 +2080,8 @@ class RenderingContext2d {
    * colour to fold into; `_drawCoverage` routes those through the scratch. */
   _coverageSource() {
     const style = this._fillStyle;
-    if (this.globalAlpha >= 1 || !isPlainColor(style)) return this._backgroundPicture;
+    if (this.globalAlpha >= 1 || !isPlainColor(style))
+      return this._backgroundPicture;
     const c = parseColor(style);
     return this.createSolidPicture(c[0], c[1], c[2], c[3] * this.globalAlpha);
   }
@@ -1633,69 +2099,149 @@ class RenderingContext2d {
     const R = this.Render;
     const scaled = dw !== sw || dh !== sh;
     if (scaled) {
-      R.SetPictureTransform(picture.id, [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1]);
-      picture.setFilter('bilinear');
+      R.SetPictureTransform(picture.id, [
+        sw / dw,
+        0,
+        sx,
+        0,
+        sh / dh,
+        sy,
+        0,
+        0,
+        1,
+      ]);
+      picture.setFilter("bilinear");
     }
     // with a transform in place the mask is already sampled from (sx, sy)
     const mx = scaled ? 0 : sx;
     const my = scaled ? 0 : sy;
 
-    const rect = this.clipMask ? this._clipRect() : null;
+    const rect = this._clips.length ? this._clipRect() : null;
     // the mask slot can hold exactly one picture, so anything that cannot be
     // folded into the colour or handed to the server as a clip rectangle has
     // to be intersected into the scratch mask first
     const scratch =
-      (this.clipMask && !rect) || (this.globalAlpha < 1 && !isPlainColor(this._fillStyle));
+      (this._clips.length && !rect) ||
+      (this.globalAlpha < 1 && !isPlainColor(this._fillStyle));
 
     if (scratch) {
       this._ensureFillMask();
-      R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-      R.Composite(R.PictOp.Src, picture.id, 0, this.fillMask.id, mx, my, 0, 0, dx, dy, dw, dh);
+      R.FillRectangles(
+        R.PictOp.Src,
+        this.fillMask.id,
+        [0, 0, 0, 0],
+        [0, 0, this.width, this.height],
+      );
+      R.Composite(
+        R.PictOp.Src,
+        picture.id,
+        0,
+        this.fillMask.id,
+        mx,
+        my,
+        0,
+        0,
+        dx,
+        dy,
+        dw,
+        dh,
+      );
       if (this.globalAlpha < 1) {
         R.Composite(
           R.PictOp.InReverse,
           this.createSolidPicture(0, 0, 0, this.globalAlpha).id,
           0,
           this.fillMask.id,
-          0, 0, 0, 0, 0, 0,
-          this.width, this.height
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          this.width,
+          this.height,
         );
       }
-      if (this.clipMask) {
-        R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+      if (this._clips.length && !rect) {
+        const clipMask = this._requireClipMask();
+        R.Composite(
+          R.PictOp.In,
+          clipMask.id,
+          0,
+          this.fillMask.id,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          this.width,
+          this.height,
+        );
+      } else if (rect) {
+        // scratch was forced by alpha-over-gradient, not by the clip: the
+        // rectangle still applies, server-side, around the final composite
+        R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+          rect.x,
+          rect.y,
+          rect.w,
+          rect.h,
+        ]);
       }
       R.Composite(
         op,
         this._backgroundPicture.id,
         this.fillMask.id,
         this.picture.id,
-        0, 0, 0, 0,
-        dx, dy,
-        dw, dh
+        0,
+        0,
+        0,
+        0,
+        dx,
+        dy,
+        dw,
+        dh,
       );
+      if (rect) {
+        R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+          0,
+          0,
+          this.width,
+          this.height,
+        ]);
+      }
     } else if (!rect || (rect.w > 0 && rect.h > 0)) {
       if (rect) {
-        R.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+        R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+          rect.x,
+          rect.y,
+          rect.w,
+          rect.h,
+        ]);
       }
       R.Composite(
         op,
         this._coverageSource().id,
         picture.id,
         this.picture.id,
-        0, 0,
-        mx, my,
-        dx, dy,
-        dw, dh
+        0,
+        0,
+        mx,
+        my,
+        dx,
+        dy,
+        dw,
+        dh,
       );
       if (rect) {
-        R.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+        this._resetPictureClip();
       }
     }
 
     if (scaled) {
       // restore defaults so the cached surface stays reusable as-is
       R.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
-      picture.setFilter('nearest');
+      picture.setFilter("nearest");
     }
     this._markDirty();
   }
@@ -1729,7 +2275,7 @@ class RenderingContext2d {
         return;
       }
 
-      if (image.format === 'a8') {
+      if (image.format === "a8") {
         this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
         return;
       }
@@ -1741,31 +2287,52 @@ class RenderingContext2d {
       if (scaled) {
         // the picture transform maps composite coordinates into source
         // samples: dest pixel (i, j) reads (sx + i*sw/dw, sy + j*sh/dh)
-        this.Render.SetPictureTransform(picture.id, [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1]);
-        picture.setFilter('bilinear');
+        this.Render.SetPictureTransform(picture.id, [
+          sw / dw,
+          0,
+          sx,
+          0,
+          sh / dh,
+          sy,
+          0,
+          0,
+          1,
+        ]);
+        picture.setFilter("bilinear");
         this.Render.Composite(
           op,
           picture.id,
           mask,
           this.picture.id,
-          0, 0,
-          dx, dy,
-          dx, dy,
-          dw, dh
+          0,
+          0,
+          dx,
+          dy,
+          dx,
+          dy,
+          dw,
+          dh,
         );
         // restore defaults so the cached upload can be reused as-is
-        this.Render.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
-        picture.setFilter('nearest');
+        this.Render.SetPictureTransform(
+          picture.id,
+          [1, 0, 0, 0, 1, 0, 0, 0, 1],
+        );
+        picture.setFilter("nearest");
       } else {
         this.Render.Composite(
           op,
           picture.id,
           mask,
           this.picture.id,
-          sx, sy,
-          dx, dy,
-          dx, dy,
-          dw, dh
+          sx,
+          sy,
+          dx,
+          dy,
+          dx,
+          dy,
+          dw,
+          dh,
         );
       }
       this._endDirectComposite(state);
@@ -1788,12 +2355,21 @@ class RenderingContext2d {
         image.picture.id,
         this._compositeMask(),
         this.picture.id,
-        0, 0, 0, 0, 0, 0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
         this.width,
-        this.height
+        this.height,
       );
       this._markDirty();
-    } else if (image && image.context && typeof image.context.getImageData === 'function') {
+    } else if (
+      image &&
+      image.context &&
+      typeof image.context.getImageData === "function"
+    ) {
       // node-canvas Canvas ( or any ctx with ctx.canvas.getImageData returning pixels)
       const imageData = image.context.getImageData(sx, sy, sWidth, sHeight);
       // node-canvas hands over straight RGBA, and the rgba32 picture below is
@@ -1803,7 +2379,7 @@ class RenderingContext2d {
         imageData.data,
         pixelLayout(this.display, 32),
         sWidth,
-        sHeight
+        sHeight,
       );
 
       // One upload GC per app rather than one per call, the same sharing
@@ -1812,8 +2388,15 @@ class RenderingContext2d {
       // time and free none of them, so drawing a node-canvas source in an
       // animation loop leaked three server resources per frame.
       const app = this.window.app;
-      const pixmap = new Pixmap(app, { depth: 32, width: sWidth, height: sHeight });
-      const picture = new Picture(app, { drawable: pixmap, format: this.Render.rgba32 });
+      const pixmap = new Pixmap(app, {
+        depth: 32,
+        width: sWidth,
+        height: sHeight,
+      });
+      const picture = new Picture(app, {
+        drawable: pixmap,
+        format: this.Render.rgba32,
+      });
       try {
         let gc = app._imageUploadGC;
         if (!gc) {
@@ -1829,9 +2412,14 @@ class RenderingContext2d {
           picture.id,
           this._compositeMask(),
           this.picture.id,
-          0, 0, 0, 0, 0, 0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
           this.width,
-          this.height
+          this.height,
         );
         this._markDirty();
       } finally {
@@ -1856,22 +2444,51 @@ class RenderingContext2d {
       matApply(this._m, dx, dy),
       matApply(this._m, dx + dw, dy),
       matApply(this._m, dx, dy + dh),
-      matApply(this._m, dx + dw, dy + dh)
+      matApply(this._m, dx + dw, dy + dh),
     ];
     const x0 = Math.max(0, Math.floor(Math.min(...corners.map((c) => c[0]))));
     const y0 = Math.max(0, Math.floor(Math.min(...corners.map((c) => c[1]))));
-    const x1 = Math.min(this.width, Math.ceil(Math.max(...corners.map((c) => c[0]))));
-    const y1 = Math.min(this.height, Math.ceil(Math.max(...corners.map((c) => c[1]))));
+    const x1 = Math.min(
+      this.width,
+      Math.ceil(Math.max(...corners.map((c) => c[0]))),
+    );
+    const y1 = Math.min(
+      this.height,
+      Math.ceil(Math.max(...corners.map((c) => c[1]))),
+    );
     if (x1 <= x0 || y1 <= y0) return;
 
     // device -> source sample (adding the source-rect origin)
     const srcM = [inv[0], inv[1], inv[2], inv[3], inv[4] + sx, inv[5] + sy];
-    this.Render.SetPictureTransform(picture.id, [srcM[0], srcM[2], srcM[4], srcM[1], srcM[3], srcM[5], 0, 0, 1]);
-    picture.setFilter('bilinear');
+    this.Render.SetPictureTransform(picture.id, [
+      srcM[0],
+      srcM[2],
+      srcM[4],
+      srcM[1],
+      srcM[3],
+      srcM[5],
+      0,
+      0,
+      1,
+    ]);
+    picture.setFilter("bilinear");
     const mask = this._compositeMask();
-    this.Render.Composite(op, picture.id, mask, this.picture.id, x0, y0, x0, y0, x0, y0, x1 - x0, y1 - y0);
+    this.Render.Composite(
+      op,
+      picture.id,
+      mask,
+      this.picture.id,
+      x0,
+      y0,
+      x0,
+      y0,
+      x0,
+      y0,
+      x1 - x0,
+      y1 - y0,
+    );
     this.Render.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
-    picture.setFilter('nearest');
+    picture.setFilter("nearest");
     this._markDirty();
   }
 }
@@ -1886,7 +2503,7 @@ class CanvasGradient {
 
     this.x0 = p0;
     this.y0 = p1;
-    if (type === 'linear' || type === 'radial') {
+    if (type === "linear" || type === "radial") {
       this.x1 = p2;
       this.y1 = p3;
       this.r0 = p4;
@@ -1911,17 +2528,34 @@ class CanvasGradient {
 
     this._id = X.AllocID();
     switch (this.type) {
-      case 'linear':
-        Render.LinearGradient(this._id, [this.x0, this.y0], [this.x1, this.y1], this.stops);
+      case "linear":
+        Render.LinearGradient(
+          this._id,
+          [this.x0, this.y0],
+          [this.x1, this.y1],
+          this.stops,
+        );
         break;
-      case 'radial':
-        Render.RadialGradient(this._id, [this.x0, this.y0], [this.x1, this.y1], this.r0, this.r1, this.stops);
+      case "radial":
+        Render.RadialGradient(
+          this._id,
+          [this.x0, this.y0],
+          [this.x1, this.y1],
+          this.r0,
+          this.r1,
+          this.stops,
+        );
         break;
-      case 'conical':
-        Render.ConicalGradient(this._id, [this.x0, this.y0], this.angle, this.stops);
+      case "conical":
+        Render.ConicalGradient(
+          this._id,
+          [this.x0, this.y0],
+          this.angle,
+          this.stops,
+        );
         break;
       default:
-        throw new Error('unknown gradient type');
+        throw new Error("unknown gradient type");
     }
     // wrap with picture so FreePicture is invoked on gc via FinalizationRegistry
     this._picture = new Picture(this.ctx.window.app, { id: this._id });
@@ -1930,7 +2564,8 @@ class CanvasGradient {
 }
 
 // register context
-Drawable.renderingContextFactory['2d'] = (window) => new RenderingContext2d(window);
+Drawable.renderingContextFactory["2d"] = (window) =>
+  new RenderingContext2d(window);
 
 export default RenderingContext2d;
 export { CanvasGradient };