ntk 8.18.0 → 8.19.0

package/lib/renderingcontext_2d.js

@@ -100,6 +100,25 @@ function isIntegral(v) {
   return Math.abs(v - Math.round(v)) < 1e-6;
 }
 
+/**
+ * The extent of AddTraps data — `[top-left x, top-right x, top, bottom-left
+ * x, bottom-right x, bottom, …]`, as `trapezoidize` makes it — or null for
+ * none.
+ */
+function trapsInk(traps) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < traps.length; i += 6) {
+    minX = Math.min(minX, traps[i], traps[i + 3]);
+    maxX = Math.max(maxX, traps[i + 1], traps[i + 4]);
+    if (traps[i + 2] < minY) minY = traps[i + 2];
+    if (traps[i + 5] > maxY) maxY = traps[i + 5];
+  }
+  return maxX >= minX && maxY >= minY ? { minX, minY, maxX, maxY } : null;
+}
+
 /** 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);
@@ -236,16 +255,6 @@ const gcRegistry = new FinalizationRegistry(({ X, gcs, regions }) => {
   });
 });
 
-/**
- * What `drawImage` takes as a server-side source: anything that knows its own
- * size and can hand over a `Picture` for this connection.
- *
- * `Image` is client pixels uploaded once; `Surface` is pixels the server drew
- * itself. Neither is special — the contract is the two members, so a caller
- * with its own cache of rendered things can satisfy it without ntk knowing
- * the type. A `RenderingContext2d` deliberately does not match: its `picture`
- * is a property rather than a method, and it keeps its own branch below.
- */
 /** a fillStyle with a single colour behind it, as opposed to a gradient, a
  * pattern or a caller-supplied Picture */
 function isPlainColor(style) {
@@ -445,6 +454,54 @@ function fitsFixed(values) {
   return values.every((v) => Math.abs(v) < 32768);
 }
 
+/** How far from a whole pixel a coordinate may be and still count as on it:
+ *  the rounding a transform adds, as `isIntegral` allows. */
+const SNAP = 1e-6;
+
+/**
+ * The rectangle (x, y, w, h) under `m`, as the whole-pixel device box a
+ * transformed `drawImage` composites over: `x0..x1` by `y0..y1`, unclamped.
+ *
+ * A corner a rounding error past a whole pixel stays on it. `rotate(Math.PI /
+ * 2)` leaves cos(π/2) at 6e-17 rather than 0, so a corner meant for y 30
+ * lands on 30.000000000000004, and rounding that out gave the box a row the
+ * rectangle does not reach.
+ *
+ * `fills` is whether the rectangle is that box exactly — an axis-aligned
+ * transform that puts every corner on a whole pixel — so that every pixel the
+ * composite touches has its centre inside the rectangle. Turned, skewed or
+ * off the pixel grid, the box holds pixels whose centres are outside it.
+ */
+function turnedBox(m, x, y, w, h) {
+  const corners = [
+    matApply(m, x, y),
+    matApply(m, x + w, y),
+    matApply(m, x, y + h),
+    matApply(m, x + w, y + h),
+  ];
+  const xs = corners.map((c) => c[0]);
+  const ys = corners.map((c) => c[1]);
+  const x0 = Math.floor(Math.min(...xs) + SNAP);
+  const y0 = Math.floor(Math.min(...ys) + SNAP);
+  const x1 = Math.ceil(Math.max(...xs) - SNAP);
+  const y1 = Math.ceil(Math.max(...ys) - SNAP);
+  const on = (v, a, b) => Math.abs(v - a) < SNAP || Math.abs(v - b) < SNAP;
+  const fills = corners.every(([cx, cy]) => on(cx, x0, x1) && on(cy, y0, y1));
+  return { x0, y0, x1, y1, fills };
+}
+
+/**
+ * What `drawImage` takes as a server-side source: anything that knows its own
+ * size and can hand over a `Picture` for this connection.
+ *
+ * `Image` is client pixels uploaded once; `Surface` is pixels the server drew
+ * itself. Neither is special — the contract is the two members, so a caller
+ * with its own cache of rendered things can satisfy it without ntk knowing
+ * the type. A `RenderingContext2d` does not match — its `picture` is a
+ * property rather than a method — and neither does a node-canvas; `drawImage`
+ * wraps both in one of these (`contextSource`, `_canvasSource`), so every
+ * form of the call treats them as it treats a Surface.
+ */
 function isPictureSource(image) {
   return (
     image instanceof Image ||
@@ -455,9 +512,83 @@ function isPictureSource(image) {
   );
 }
 
+/** a node-canvas, or anything else whose pixels come from
+ * `image.context.getImageData()` */
+function isCanvasLike(image) {
+  return typeof image?.context?.getImageData === "function";
+}
+
+/**
+ * `drawImage`'s arguments as the eight numbers of its longest form — the
+ * source rectangle, then the destination one — whichever form they came in.
+ */
+function imageRects(image, args) {
+  let sx = 0;
+  let sy = 0;
+  let sw = image.width;
+  let sh = image.height;
+  let dx = 0;
+  let dy = 0;
+  let dw;
+  let dh;
+  if (args.length >= 8) {
+    [sx, sy, sw, sh, dx, dy, dw, dh] = args;
+  } else if (args.length >= 4) {
+    [dx, dy, dw, dh] = args;
+  } else {
+    [dx = 0, dy = 0] = args;
+    dw = sw;
+    dh = sh;
+  }
+  return [sx, sy, sw, sh, dx, dy, dw, dh];
+}
+
+/**
+ * A 2d context as a `drawImage` source: the picture-source contract over the
+ * pixels it has drawn, so that it is drawn exactly as a Surface is.
+ *
+ * Its picture comes with nothing in the clip slot (`_sourcePicture`). A
+ * context drawing into an a8 target is coverage, painted in the current
+ * `fillStyle`, as the a8 Surface it is drawing into would be. `_drawable` is
+ * for `_drawsFromCopy`.
+ */
+function contextSource(ctx, app) {
+  if (!ctx._picture) throw destroyedSourceError();
+  if (ctx.window.app !== app) throw otherConnectionError();
+  return {
+    width: ctx.width,
+    height: ctx.height,
+    format: ctx._picture.format === app.display.Render.a8 ? "a8" : undefined,
+    picture: () => ctx._sourcePicture(),
+    _drawable: ctx._target,
+  };
+}
+
+function destroyedSourceError() {
+  return new Error(
+    "drawImage: the 2d context passed as the image has been destroyed — by\n" +
+      "ctx.destroy(), along with its window, or at the end of the\n" +
+      "Surface.render() call that lent it — so there is nothing to read.\n" +
+      "\n" +
+      "Draw the Surface itself, or keep a context from getContext('2d') for\n" +
+      "as long as you draw from it.",
+  );
+}
+
+function otherConnectionError() {
+  return new Error(
+    "drawImage: the 2d context passed as the image draws on another X\n" +
+      "connection, and a picture means nothing on a connection that did not\n" +
+      "make it. Bring the pixels over through the client:\n" +
+      "\n" +
+      "    const pixels = await source.getImageData(0, 0, source.width, source.height);\n" +
+      "    ctx.drawImage(new Image(pixels), x, y);",
+  );
+}
+
 // canvas globalCompositeOperation -> XRender PictOp name. Porter-Duff ops
-// map directly; with a clip/shape mask active the op only applies inside
-// the mask coverage (outside pixels are left untouched).
+// map directly, and a clip bounds every one of them: nothing outside it
+// changes, whatever the op (`_clipAfter`).
 const GCO_TO_PICTOP = {
   "source-over": "Over",
   copy: "Src",
@@ -477,7 +608,9 @@ const GCO_TO_PICTOP = {
 // what the split gives up is the gaps between the boxes, and for these ops
 // the single-box version would not have changed those pixels either. `copy`,
 // `source-in`, `destination-in`, `source-out` and `destination-atop` write
-// the source — or nothing — across the whole box, so they keep one.
+// the source — or nothing — across the whole box, so they keep one. Nor can
+// a path clip be folded into their mask: it is applied after them instead
+// (`_clipAfter`).
 const MASK_BOUNDED_OPS = [
   "Over",
   "OverReverse",
@@ -856,6 +989,11 @@ class RenderingContext2d {
       return;
     }
     if (!this._pictureClipped) return; // nothing of ours is in the slot
+    this._clearPictureClip();
+  }
+
+  /** Empty the picture's clip slot. */
+  _clearPictureClip() {
     if (this._fixes) {
       // None is the real "no clip"; a rectangle would only be a wider one
       this._fixes.SetPictureClipRegion(this._picture.id, 0, 0, 0);
@@ -898,6 +1036,26 @@ class RenderingContext2d {
     return this._picture;
   }
 
+  /**
+   * The picture for a composite that reads this context's pixels — a
+   * `drawImage` of the context — with nothing in its clip slot.
+   *
+   * A clip is drawing state, not part of the pixels: a canvas drawn
+   * somewhere gives up all of them, whatever its own context's clip. But
+   * glamor — Xorg's modesetting driver, Xwayland — cuts a composite down to
+   * its source's clip, where fb (Xvfb, XQuartz) reads past it, and `picture`
+   * leaves the slot holding what the clip stack says, a region clip included.
+   * So the slot is emptied here, and what it held is owed back: it goes back
+   * on before this context next draws, as any reset does.
+   */
+  _sourcePicture() {
+    if (this._pictureClipped) {
+      this._clearPictureClip();
+      this._clipStale = true;
+    }
+    return this._picture;
+  }
+
   /**
    * The region the clip stack currently means, or null when it holds no
    * region entry. One entry is used as it is; several are intersected into a
@@ -946,9 +1104,10 @@ class RenderingContext2d {
    * one per offscreen `Surface`, say — because without it each one
    * permanently costs a GC and a Picture.
    *
-   * `_backgroundPicture` and `_glyphSource` are deliberately not freed here:
-   * both are either solids owned by the app (`App#solidPicture` — shared
-   * with every other context, freed with the connection) or a
+   * What fills, strokes and glyphs paint with is deliberately not freed
+   * here: either solids owned by the app (`App#styleSolid`,
+   * `App#solidPicture` — shared with every other context, and freed by the
+   * app, as it lets them go or with the connection) or a
    * `Picture`/`CanvasGradient` the caller passed in through `fillStyle`,
    * which is not ours to free.
    */
@@ -984,7 +1143,7 @@ class RenderingContext2d {
     this._gc = this._fillMaskGC = this._clipMaskGC = null;
     this._gcs.length = 0;
 
-    this._backgroundPicture = this._glyphSource = null;
+    this._fillSource = this._strokeSource = this._glyphSource = null;
 
     if (this._picture) {
       // a picture on a *window* is freed by the server with the window;
@@ -1042,6 +1201,34 @@ class RenderingContext2d {
     return this.window.height;
   }
 
+  /**
+   * Whether text drawn here — `fillText`, `drawGlyphs` and so
+   * `TextLayout.draw` — honours `globalAlpha`. Always true: it is here to
+   * be asked. ntk used to draw glyphs at full opacity whatever the alpha,
+   * and a renderer handed contexts it did not make (another backend's, an
+   * older ntk's) has to fade their text some dearer way, such as drawing it
+   * on a surface of its own and fading that. Undefined on a context that
+   * has never heard of it, which is the answer that keeps it safe.
+   */
+  get fadesGlyphs() {
+    return true;
+  }
+
+  /**
+   * Whether `drawGlyphs` and `drawTraps` take a colour for their source as
+   * well as a picture: a CSS colour string or a premultiplied
+   * `[r, g, b, a]`, the two forms `fillStyle` takes, or `null` for the fill
+   * style itself (`_sourceOf`). Always true, and here to be asked, as
+   * `fadesGlyphs` is. Older ntk took a picture only, and a colour drew
+   * nothing: the server refused it as a picture after the call had
+   * returned, so nothing a caller could catch said so. Code handed a
+   * context it did not make asks this first, and makes its solids with
+   * `createSolidPicture` where it is not true.
+   */
+  get takesColorSources() {
+    return true;
+  }
+
   _op() {
     return this.Render.PictOp[GCO_TO_PICTOP[this._gco] || "Over"];
   }
@@ -1060,15 +1247,28 @@ class RenderingContext2d {
     return this.window.app.solidPicture(r, g, b, a);
   }
 
+  /**
+   * A solid for this call's own requests: a colour with `globalAlpha`
+   * folded into it, or the alpha alone in a mask slot. A fade makes a new
+   * one every frame, so the app keeps only the most recent and frees the
+   * rest (App#transientSolid) — use it in the requests of the call that
+   * asked, and never keep it or hand it out. An app that only answers
+   * solidPicture — a host's own, a test's stand-in — keeps them all.
+   */
+  _transientSolid(r, g, b, a) {
+    const app = this.window.app;
+    return app.transientSolid
+      ? app.transientSolid(r, g, b, a)
+      : app.solidPicture(r, g, b, a);
+  }
+
   _stylePicture(value) {
-    if (typeof value === "string") {
-      // by the string, where the app keeps that index (App#solidPictureOf);
-      // an app that only answers solidPicture — a host's own, a test's
-      // stand-in — takes the long way below
-      const app = this.window.app;
-      if (app.solidPictureOf) return app.solidPictureOf(value);
-    }
     if (typeof value === "string" || Array.isArray(value)) {
+      // the app's, which it lets go as colours animate (App#styleSolid) —
+      // the style stays here, to ask by again. An app that only answers
+      // solidPicture — a host's own, a test's stand-in — takes the long way
+      const app = this.window.app;
+      if (app.styleSolid) return app.styleSolid(value);
       const c = parseColor(value);
       return this.createSolidPicture(c[0], c[1], c[2], c[3]);
     }
@@ -1086,7 +1286,7 @@ class RenderingContext2d {
     // the picture first: a value that throws leaves the style as it was
     const picture = this._stylePicture(value);
     this._fillStyle = value;
-    this._backgroundPicture = picture;
+    this._fillSource = picture;
   }
 
   get fillStyle() {
@@ -1097,13 +1297,35 @@ class RenderingContext2d {
     // the picture first: a value that throws leaves the style as it was
     const picture = this._stylePicture(value);
     this._strokeStyle = value;
-    this._strokePicture = picture;
+    this._strokeSource = picture;
   }
 
   get strokeStyle() {
     return this._strokeStyle;
   }
 
+  /**
+   * What a fill paints with: the gradient, pattern or picture `fillStyle`
+   * is, or the app's solid of its colour. The app lets a solid go once more
+   * colours than it keeps have been asked for since (App#styleSolid), and
+   * once it is freed its id can come back in another colour — so one found
+   * let go is asked for again, by the style. Read it for the drawing at
+   * hand: what it returns is good for the rest of the job, and past that
+   * only through here.
+   */
+  get _backgroundPicture() {
+    const p = this._fillSource;
+    if (!p?._evicted) return p;
+    return (this._fillSource = this._stylePicture(this._fillStyle));
+  }
+
+  /** What a stroke paints with, from `strokeStyle`, as `_backgroundPicture`. */
+  get _strokePicture() {
+    const p = this._strokeSource;
+    if (!p?._evicted) return p;
+    return (this._strokeSource = this._stylePicture(this._strokeStyle));
+  }
+
   /**
    * Canvas-spec dash list: values are distances (user-space units) of
    * alternating dashes and gaps. An empty list means solid; an odd-length
@@ -1358,8 +1580,10 @@ class RenderingContext2d {
    * as they do to the drawing it belongs to.
    */
   _paintShadow(surface, dx, dy) {
+    // put back as it was: a solid the app let go of meanwhile is asked for
+    // again when next read (_backgroundPicture)
     const style = this._fillStyle;
-    const picture = this._backgroundPicture;
+    const source = this._fillSource;
     this.fillStyle = this._shadowColor;
     try {
       this._drawCoverage(
@@ -1376,7 +1600,7 @@ class RenderingContext2d {
       );
     } finally {
       this._fillStyle = style;
-      this._backgroundPicture = picture;
+      this._fillSource = source;
     }
   }
 
@@ -1769,8 +1993,9 @@ class RenderingContext2d {
     );
     if (!tile) return false;
     const picture = tile.picture(app);
+    // put back as it was, as _paintShadow does
     const style = this._fillStyle;
-    const background = this._backgroundPicture;
+    const source = this._fillSource;
     this.fillStyle = this._shadowColor;
     try {
       const op = this._op();
@@ -1791,7 +2016,7 @@ class RenderingContext2d {
       }
     } finally {
       this._fillStyle = style;
-      this._backgroundPicture = background;
+      this._fillSource = source;
     }
     return true;
   }
@@ -2379,10 +2604,116 @@ class RenderingContext2d {
     return this._boundedOps.has(op);
   }
 
+  /**
+   * Whether a drawing with `op` has to have the clip applied after the op
+   * (`_compositeClipAfter`) rather than folded into its mask.
+   *
+   * The canvas never changes a pixel outside the clip, and at an
+   * antialiased clip edge takes a pixel as far from what it was towards
+   * what the op makes of it as the clip covers it. Folded into the mask,
+   * the clip scales the source instead, which for an op that leaves the
+   * destination alone where the mask is zero is that same pixel: `Over`
+   * through a mask of a half is half of the way to `Over`. The rest write
+   * where the mask is zero — through it, `copy` is the source *times* the
+   * mask — so folded in, a clip would clear every pixel of the drawing's
+   * box it leaves out. A rectangular clip never needs this: the box is cut
+   * to it, or the server clips to it, and neither touches a pixel outside.
+   */
+  _clipAfter(op) {
+    return this._hasPolyClip && !this._maskBounded(op);
+  }
+
+  /**
+   * `Composite` of `src` through `mask` onto this context: straight onto its
+   * picture, or, `after`, with the clip applied after the op
+   * (`_compositeClipAfter`), when `mask` does not hold the clip. The rest
+   * of the arguments are Composite's own, from the source's coordinates on.
+   */
+  _compositeOnto(after, op, src, mask, ...coords) {
+    if (after) {
+      this._compositeClipAfter(op, src, mask, ...coords);
+      return;
+    }
+    this.Render.Composite(op, src, mask, this._dst(), ...coords);
+  }
+
+  /**
+   * A `Composite` onto this context, with the clip the a8 clip mask holds
+   * applied after the op, as the canvas applies one: each pixel goes from
+   * what it was towards what the op makes of it by as much as the clip
+   * covers it. Inside the clip that is the op, outside it nothing at all,
+   * and along an antialiased edge the blend between the two.
+   *
+   * RENDER has no operator for that. The op is done on a copy of the box,
+   * in the destination's own format, and the copy comes back through the
+   * clip's coverage `c` in two composites: `OutReverse` leaves `d·(1 − c)`
+   * of the destination and `Add` puts `t·c` of the copy into it. A pixel
+   * the clip covers wholly, or not at all, comes out exact.
+   *
+   * The arguments are the ones the Composite request would have carried with
+   * no clip, and `mask` holds none. The box is cut to the clip's extents —
+   * outside them the clip covers nothing, so nothing there is read or
+   * written — on the whole pixels the wire takes, so it samples what the
+   * one composite would have.
+   */
+  _compositeClipAfter(op, src, mask, srcX, srcY, maskX, maskY, dstX, dstY, w, h) {
+    const R = this.Render;
+    // each coordinate truncated on its own, as the 16-bit wire fields are
+    const left = Math.trunc(dstX);
+    const top = Math.trunc(dstY);
+    const ext = this._clipExtents() ?? {
+      x: 0,
+      y: 0,
+      w: this.width,
+      h: this.height,
+    };
+    const x = Math.max(left, ext.x);
+    const y = Math.max(top, ext.y);
+    const bw = Math.min(left + Math.trunc(w), ext.x + ext.w) - x;
+    const bh = Math.min(top + Math.trunc(h), ext.y + ext.h) - y;
+    if (!(bw > 0 && bh > 0)) return;
+    const clipMask = this._requireClipMask().id;
+    const dst = this._dst();
+    const app = this.window.app;
+    const pixmap = new Pixmap(app, {
+      depth: this._targetPixels().depth,
+      width: bw,
+      height: bh,
+    });
+    const copy = new Picture(app, {
+      drawable: pixmap,
+      format: this._picture.format,
+    });
+    try {
+      R.Composite(R.PictOp.Src, dst, 0, copy.id, x, y, 0, 0, 0, 0, bw, bh);
+      R.Composite(
+        op,
+        src,
+        mask,
+        copy.id,
+        Math.trunc(srcX) + x - left,
+        Math.trunc(srcY) + y - top,
+        Math.trunc(maskX) + x - left,
+        Math.trunc(maskY) + y - top,
+        0,
+        0,
+        bw,
+        bh,
+      );
+      R.Composite(R.PictOp.OutReverse, clipMask, 0, dst, x, y, 0, 0, x, y, bw, bh);
+      R.Composite(R.PictOp.Add, copy.id, clipMask, dst, 0, 0, x, y, x, y, bw, bh);
+    } finally {
+      // queued behind the composites that read it
+      copy.destroy();
+      pixmap.destroy();
+    }
+  }
+
   /**
    * The tail every masked fill and stroke ends in: coverage for one box into
    * the scratch a8 mask, scaled by `alpha`, intersected with the clip, and
-   * the source composited through it.
+   * the source composited through it — or, for an op that writes where the
+   * mask is zero, the clip applied after it (`_clipAfter`).
    *
    * `job` is what a Rasterizer takes minus the box (docs/context-2d.md) —
    * `{ polys, rule }` or `{ triangles }`; `server` rasterizes the same
@@ -2430,7 +2761,8 @@ class RenderingContext2d {
         [out.x, out.y, out.w, out.h],
       );
     }
-    if (this.clipMask) {
+    const after = this._clipAfter(op);
+    if (this.clipMask && !after) {
       // clipMask is surface-aligned, so it is sampled at the same offset
       R.Composite(
         R.PictOp.In,
@@ -2450,11 +2782,11 @@ class RenderingContext2d {
     // src is either a 1x1 repeating solid (offset irrelevant) or a
     // gradient/pattern, sampled at the same offset from its own origin
     const [ox, oy] = sourceOrigin(src);
-    R.Composite(
+    this._compositeOnto(
+      after,
       op,
       src.id,
       this.fillMask.id,
-      this._dst(),
       out.x - ox,
       out.y - oy,
       out.x,
@@ -3139,8 +3471,12 @@ class RenderingContext2d {
    * instead of shaping.
    *
    * @param {number} op Render.PictOp (`ctx.Render.PictOp.Over` for normal text)
-   * @param {Picture} src source picture the glyphs paint with — a solid
-   *   (`ctx.createSolidPicture(r, g, b, a)`, premultiplied 0..1) or a gradient
+   * @param {string|number[]|null|Picture|CanvasGradient} src what the glyphs
+   *   paint with: a colour — a CSS colour string, or a premultiplied
+   *   `[r, g, b, a]` in 0..1 — or `null` for the fill style; or a picture —
+   *   a solid (`ctx.createSolidPicture(r, g, b, a)`) or a gradient. A colour
+   *   paints with a solid the app lets go of as colours change, where each
+   *   of `createSolidPicture`'s is held until the app closes (`_sourceOf`)
    * @param {Array<{run, x, y, textRendering?}>} positioned runs in visual
    *   order; `x`/`y` is the run's baseline origin in **user space** — the
    *   current transform applies to it, as it does to every other drawing
@@ -3169,8 +3505,14 @@ class RenderingContext2d {
    * relative positions, painted under the glyphs (issue #283). A paragraph
    * whose spans change colour draws as several calls, and — as several
    * `fillText`s would — casts a shadow per call.
+   *
+   * So does `globalAlpha`, to the glyphs and their shadow both, as it does
+   * to every fill: at 0 nothing is drawn, not even the shadow.
    */
   drawGlyphs(op, src, positioned) {
+    if (this.globalAlpha <= 0) return;
+    // before the shadow: a colour that is not one throws with nothing drawn
+    src = this._sourceOf(src, "drawGlyphs");
     const m = this._m;
     if (!matIsIdentity(m)) {
       positioned = positioned.map((p) => {
@@ -3195,12 +3537,29 @@ class RenderingContext2d {
    * instead, intersect that with the clip, and paint the real source
    * through the result — the same shape as _fillPolys. A rectangular clip
    * takes the server-side fast path below instead of the mask.
+   *
+   * Nor has it a mask slot for `globalAlpha`, which is why text used to be
+   * drawn at full opacity whatever it was. A solid source takes the alpha
+   * in its colour, as `fillRect`'s does, and the glyphs go the way they
+   * always went; a gradient or a pattern has no one colour to fold it
+   * into, and paints through the scratch mask with the alpha in there.
+   *
+   * And it composites each glyph on its own, over that glyph's box. For an
+   * op that leaves the destination alone where the mask is zero, that draws
+   * what one composite through all of them would, but where two glyphs'
+   * ink overlaps and takes the op twice. For `copy`, `source-in`,
+   * `destination-in`, `source-out` and `destination-atop` it is nothing
+   * like: each glyph's box is cleared outside its ink, a neighbour's ink
+   * with it, and the rest of the drawing's box is left alone. Those paint
+   * through the scratch mask too, once, over the box round every glyph's
+   * ink — the box a fill of the same coverage clears (`_paintThroughMask`).
    */
   _drawGlyphsDevice(op, src, positioned) {
+    if (this.globalAlpha <= 0) return;
     const app = this.window.app;
-    const R = this.Render;
     if (!prepareStyle(src, this._m, this.width, this.height)) return;
-    if (!this._hasPolyClip) {
+    const faded = this._fadedSource(src);
+    if (faded && !this._hasPolyClip && this._maskBounded(op)) {
       // Fast path: a rectangular clip is something the server can do itself.
       // Two small requests around the ordinary glyph composite, instead of
       // clearing and compositing a full-surface a8 mask three times — which
@@ -3215,77 +3574,50 @@ class RenderingContext2d {
       drawGlyphRuns(
         app,
         op,
-        src.id,
+        faded.id,
         this._dst(),
         positioned,
         rect ?? { x: 0, y: 0, w: this.width, h: this.height },
-        sourceOrigin(src),
+        sourceOrigin(faded),
       );
       if (rect) this._invalidatePictureClip();
       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],
-    );
-    // solid white through the glyphs leaves their coverage in the a8 mask
-    drawGlyphRuns(
-      app,
-      R.PictOp.Over,
-      this._glyphSource.id,
-      this.fillMask.id,
-      positioned,
-      { x: 0, y: 0, w: this.width, h: this.height },
-    );
-    R.Composite(
-      R.PictOp.In,
-      clipMask.id,
-      0,
-      this.fillMask.id,
-      0,
-      0,
-      0,
-      0,
-      0,
-      0,
-      this.width,
-      this.height,
-    );
-    const [ox, oy] = sourceOrigin(src);
-    R.Composite(
+    // every glyph's, whether or not it is sent: a glyph too far outside the
+    // clip to be drawn still widens the box an op like `copy` clears
+    const ink = positionedRunsInk(positioned);
+    if (!ink) return; // a run of spaces inks nothing
+    const R = this.Render;
+    const alpha = faded ? 1 : this.globalAlpha;
+    this._paintThroughScratch(
       op,
-      src.id,
-      this.fillMask.id,
-      this._dst(),
-      -ox,
-      -oy,
-      0,
-      0,
-      0,
-      0,
-      this.width,
-      this.height,
+      faded ?? src,
+      alpha,
+      this._rawBox(ink.minX, ink.minY, ink.maxX, ink.maxY),
+      (white, mask, bounds) =>
+        drawGlyphRuns(app, R.PictOp.Over, white, mask, positioned, bounds),
     );
-    this._markDirty();
   }
 
   /**
    * Trapezoid coverage under the clip — `drawGlyphs` for vector shapes that
    * are already trapezoidized (KaTeX radicals and rules go this way).
    * Without it they composite straight to the destination picture and spill
-   * out of clipped boxes, which is what glyphs used to do.
+   * out of clipped boxes, which is what glyphs used to do. `globalAlpha`
+   * applies as it does to glyphs, so a radical fades with the formula, and
+   * so does `op`: one that writes where the mask is zero clears the box
+   * round the trapezoids, with the same pixel of slack, on either route.
+   * `src` is what `drawGlyphs` takes: a colour, `null` for the fill style,
+   * or a picture.
    */
   drawTraps(op, src, traps) {
-    if (!traps.length) return;
+    if (!traps.length || this.globalAlpha <= 0) return;
+    src = this._sourceOf(src, "drawTraps");
     const app = this.window.app;
-    const R = this.Render;
-    if (!this._hasPolyClip) {
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
+    const faded = this._fadedSource(src);
+    if (faded && !this._hasPolyClip && this._maskBounded(op)) {
       const rect = this._clipRect();
       if (rect) {
         if (rect.w === 0 || rect.h === 0) return;
@@ -3294,61 +3626,152 @@ class RenderingContext2d {
       compositeTraps(
         app,
         op,
-        src.id,
+        faded.id,
         this._dst(),
         traps,
         undefined,
         undefined,
-        sourceOrigin(src),
+        sourceOrigin(faded),
       );
       if (rect) this._invalidatePictureClip();
       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,
+    const ink = trapsInk(traps);
+    if (!ink) return;
+    const alpha = faded ? 1 : this.globalAlpha;
+    this._paintThroughScratch(
+      op,
+      faded ?? src,
+      alpha,
+      this._rawBox(ink.minX, ink.minY, ink.maxX, ink.maxY),
+      (white, mask) =>
+        compositeTraps(app, this.Render.PictOp.Over, white, mask, traps),
     );
-    R.Composite(
-      R.PictOp.In,
-      clipMask.id,
-      0,
-      this.fillMask.id,
-      0,
-      0,
-      0,
-      0,
-      0,
-      0,
-      this.width,
-      this.height,
+  }
+
+  /**
+   * The picture a `drawGlyphs` or `drawTraps` source paints with. A colour
+   * — a CSS colour string or a premultiplied `[r, g, b, a]` — is the app's
+   * solid of it, from the LRU the colour styles share (App#styleSolid):
+   * good for the rest of the job, then let go of once enough other colours
+   * have been asked for. That is why a caller passes one rather than a
+   * solid from `createSolidPicture`, which is held until the app closes:
+   * a terminal showing truecolor output, or a colour animated through a
+   * tween, made one of those for every colour it ever drew. `null` is the
+   * fill style's. Anything else is a picture or a style of the caller's,
+   * and goes as it came.
+   */
+  _sourceOf(src, call) {
+    if (src == null) return this._backgroundPicture;
+    if (typeof src === "string" || Array.isArray(src)) {
+      return this._stylePicture(src);
+    }
+    if (typeof src === "object") return src;
+    // a grid keeps its colours as 0xRRGGBB numbers, and one handed over as
+    // it is went to the server as a picture id, which it refused later
+    const hex =
+      Number.isInteger(src) && src >= 0 && src <= 0xffffff
+        ? ` ('#${src.toString(16).padStart(6, "0")}' is that number read as 0xRRGGBB)`
+        : "";
+    throw new TypeError(
+      `${call}: src is ${typeof src === "number" ? src : `a ${typeof src}`}, neither a ` +
+        `colour nor a picture. Pass a CSS colour string${hex}, a premultiplied ` +
+        "[r, g, b, a] in 0..1, null for the fillStyle, or a picture such as " +
+        "createSolidPicture makes",
     );
+  }
+
+  /**
+   * `src` with `globalAlpha` folded into it: the source itself at full
+   * opacity, and at less, a solid of its colour with all four premultiplied
+   * components scaled — which is compositing it at that opacity, for any op
+   * (`_foldedColor`). Null when there is an alpha to apply and no colour to
+   * fold it into: a gradient, a pattern, a picture of the caller's, or a
+   * solid from a host whose `solidPicture` does not say what it paints with
+   * (App#solidPicture does).
+   */
+  _fadedSource(src) {
+    const a = this.globalAlpha;
+    if (a >= 1) return src;
+    const c = src._rgba;
+    if (!c) return null;
+    return this._transientSolid(c[0] * a, c[1] * a, c[2] * a, c[3] * a);
+  }
+
+  /**
+   * Paint `src` through coverage the server draws into the scratch a8 mask:
+   * how glyphs and trapezoids reach the surface when their own composite
+   * cannot carry what applies to it — a clip that is not a rectangle, a
+   * `globalAlpha` with no colour to fold into, or an op that writes where
+   * they have no ink.
+   *
+   * `box` is the drawing's own box in device pixels, its ink with a pixel
+   * of slack (`_rawBox`), and everything here is bounded to the part of it
+   * the surface and the clip let through, as a fill's mask is
+   * (`_paintThroughMask`): the clip's rectangle, or the extents of a stack
+   * with a path in it. For most ops that only saves pixel work. For the
+   * ones that clear where the mask is zero it is what they clear — the
+   * rest of the drawing's box inside the clip, not the rest of the surface.
+   *
+   * `drawCoverage(white, mask, bounds)` composites the coverage into the
+   * mask, with a solid white source: what that leaves in an a8 picture is
+   * exactly the coverage. Only `bounds` of it is read, so a glyph that
+   * cannot reach it need not be sent. `alpha` scales the coverage, the clip
+   * mask cuts it, and `src` is composited through the result — or, for an
+   * op that writes where the mask is zero, the clip is applied after it
+   * (`_clipAfter`).
+   */
+  _paintThroughScratch(op, src, alpha, box, drawCoverage) {
+    const R = this.Render;
+    const clip = this._hasPolyClip ? this._clipExtents() : this._clipRect();
+    let out = this._onSurface(box);
+    if (out && clip) out = intersectBox(out, clip);
+    // off the surface, clipped away, or not a number at all — the box of a
+    // glyph whose origin is at Infinity
+    if (!(out?.w > 0 && out.h > 0)) return;
+    const after = this._clipAfter(op);
+    const clipMask = this._hasPolyClip && !after ? this._requireClipMask() : null;
+    this._ensureFillMask();
+    this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
+    const rect = [out.x, out.y, out.w, out.h];
+    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], rect);
+    drawCoverage(this._glyphSource.id, this.fillMask.id, out);
+    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], rect);
+    }
+    if (clipMask) {
+      // clipMask is surface-aligned, so it is sampled at the same offset
+      R.Composite(
+        R.PictOp.In,
+        clipMask.id,
+        0,
+        this.fillMask.id,
+        out.x,
+        out.y,
+        0,
+        0,
+        out.x,
+        out.y,
+        out.w,
+        out.h,
+      );
+    }
     const [ox, oy] = sourceOrigin(src);
-    R.Composite(
+    this._compositeOnto(
+      after,
       op,
       src.id,
       this.fillMask.id,
-      this._dst(),
-      -ox,
-      -oy,
-      0,
-      0,
-      0,
-      0,
-      this.width,
-      this.height,
+      out.x - ox,
+      out.y - oy,
+      out.x,
+      out.y,
+      out.x,
+      out.y,
+      out.w,
+      out.h,
     );
     this._markDirty();
   }
@@ -3359,20 +3782,18 @@ class RenderingContext2d {
    * a8 mask anywhere (issue #307).
    *
    * Neither thing `_compositeMask()` puts in a mask is really mask work.
-   * A **rectangular clip** is a smaller composite box: for an op that leaves
-   * the destination alone where the mask is zero, zeroing the mask outside
-   * the rectangle and never compositing there are the same picture — and a
-   * rect clip is an integer rectangle stamped as binary coverage, so the two
-   * agree pixel for pixel rather than approximately. **`globalAlpha`** is a
-   * 1x1 solid, which is that alpha everywhere the server samples it, for the
-   * price of no pixels at all. A **region** clip needs neither: the picture
-   * carries it, and it applies to the composite like any other.
+   * A **rectangular clip** is a smaller composite box: the canvas changes
+   * nothing outside the clip, and never compositing there is exactly that,
+   * for every op — `copy` and the other ops that write where the mask is
+   * zero included, which through a mask cleared the box outside the clip.
+   * Inside it a rect clip is binary coverage of 1, so the two agree pixel
+   * for pixel rather than approximately. **`globalAlpha`** is a 1x1 solid,
+   * which is that alpha everywhere the server samples it, for the price of
+   * no pixels at all. A **region** clip needs neither: the picture carries
+   * it, and it applies to the composite like any other.
    *
    * What is left needing a mask is what genuinely needs one: a
-   * non-rectangular clip entry, or an op that writes where the mask is zero
-   * — `copy`, `source-in`, `destination-in`, `source-out` and
-   * `destination-atop` cover the whole composite box, so a shrunk box would
-   * leave behind the pixels the mask path clears.
+   * non-rectangular clip entry (`_compositeMasked`).
    *
    * `box` is the composite's destination box in device coordinates. Callers
    * pass their own arguments through, so it is only intersected when it is
@@ -3383,14 +3804,13 @@ class RenderingContext2d {
    * @returns {{box: ?object, mask: number}|null} the box to composite over —
    * null when the clip rejects it whole and nothing should be drawn — and
    * the mask slot for it; or null when this route does not apply and the
-   * caller has to fall back to `_compositeMask()`.
+   * caller has to fall back to `_compositeMasked()`.
    */
-  _boxedComposite(box, op) {
+  _boxedComposite(box) {
     if (this._hasPolyClip) return null;
     let out = box;
     const clip = this._clipRect();
     if (clip) {
-      if (!this._maskBounded(op)) return null;
       if (![box.x, box.y, box.w, box.h].every(isIntegral)) return null;
       out = intersectBox(box, clip);
     }
@@ -3405,7 +3825,7 @@ class RenderingContext2d {
    */
   _alphaMask() {
     if (this.globalAlpha >= 1) return 0;
-    return this.createSolidPicture(0, 0, 0, this.globalAlpha).id;
+    return this._transientSolid(0, 0, 0, this.globalAlpha).id;
   }
 
   /**
@@ -3436,7 +3856,9 @@ class RenderingContext2d {
   // The fallback, not the common case: `_boxedComposite` above answers for a
   // rect-only clip stack without materializing anything, and every caller
   // here asks it first. A **region** clip needs nothing either — the picture
-  // carries it, and the mask must not try to hold it.
+  // carries it, and the mask must not try to hold it. Nor is it for an op
+  // that writes where the mask is zero: that takes the clip after the op
+  // (`_clipAfter`).
   //
   // `box` is the destination box of the composite the mask is for, in device
   // coordinates. The composite samples the mask over that box and nowhere
@@ -3478,6 +3900,33 @@ class RenderingContext2d {
     return this.fillMask.id;
   }
 
+  /**
+   * The direct composite `_boxedComposite` has no cheap form for: `src`
+   * over `box`, sampled from (`srcX`, `srcY`), under a clip the a8 clip mask
+   * holds — a path, or a rectangle a box off the pixel grid cannot be cut
+   * to. For an op that leaves the destination alone where the mask is zero
+   * the clip and `globalAlpha` are one mask (`_compositeMask`). The rest
+   * would clear every pixel of the box the clip leaves out, so for them the
+   * mask is the alpha alone and the clip goes after the op (`_clipAfter`).
+   */
+  _compositeMasked(op, src, srcX, srcY, box) {
+    const after = !this._maskBounded(op);
+    this._compositeOnto(
+      after,
+      op,
+      src,
+      after ? this._alphaMask() : this._compositeMask(box),
+      srcX,
+      srcY,
+      box.x,
+      box.y,
+      box.x,
+      box.y,
+      box.w,
+      box.h,
+    );
+  }
+
   // ------------------------------------------------------------------
   // drawing
 
@@ -3590,24 +4039,28 @@ class RenderingContext2d {
       // coordinates all shift with the box, so a gradient or a pattern stays
       // where it was and only the ink outside the clip goes away.
       const direct =
-        w > 0 && h > 0 ? this._boxedComposite({ x, y, w, h }, op) : null;
+        w > 0 && h > 0 ? this._boxedComposite({ x, y, w, h }) : null;
       if (direct && !direct.box) return; // the clip rejects the fill whole
-      const box = direct ? direct.box : { x, y, w, h };
       const [ox, oy] = sourceOrigin(style);
-      this.Render.Composite(
-        op,
-        style.id,
-        direct ? direct.mask : this._compositeMask(box),
-        this._dst(),
-        box.x - ox,
-        box.y - oy,
-        box.x,
-        box.y,
-        box.x,
-        box.y,
-        box.w,
-        box.h,
-      );
+      if (direct) {
+        const box = direct.box;
+        this.Render.Composite(
+          op,
+          style.id,
+          direct.mask,
+          this._dst(),
+          box.x - ox,
+          box.y - oy,
+          box.x,
+          box.y,
+          box.x,
+          box.y,
+          box.w,
+          box.h,
+        );
+      } else {
+        this._compositeMasked(op, style.id, x - ox, y - oy, { x, y, w, h });
+      }
       this._markDirty();
       return;
     }
@@ -4178,7 +4631,9 @@ class RenderingContext2d {
         });
       }
       const encoded = encodeGlyphItems(items, page.bits);
-      const src = app.solidPicture(color[0], color[1], color[2], color[3]);
+      // the style's own solid at full opacity; under a fade, one with the
+      // alpha folded in, made for this composite
+      const src = this._transientSolid(color[0], color[1], color[2], color[3]);
       R.CompositeGlyphs(
         encoded.bits,
         R.PictOp.Over,
@@ -4720,10 +5175,16 @@ class RenderingContext2d {
    * The current transform's translation applies to the anchor point;
    * glyphs themselves are not rotated/scaled by the transform (size the
    * font via `ctx.font` instead).
+   *
+   * The glyphs composite with `globalCompositeOperation`, as a fill does
+   * and as their shadow always did: drawn source-over whatever it was, a
+   * shadowed `destination-out` label erased with its shadow and then
+   * painted its letters back in.
    */
   fillText(text, x, y) {
     text = String(text ?? "");
-    if (!text) return;
+    // nothing to draw, and at globalAlpha 0 nothing to shape it for
+    if (!text || this.globalAlpha <= 0) return;
     if (this._shadowed()) this._shadowOfText(text, x, y);
     const style = this._resolvedTextStyle();
     const app = this.window.app;
@@ -4747,11 +5208,7 @@ class RenderingContext2d {
     }
     // already device space: the anchor went through the matrix above, and
     // the offsets and advances added to it are device pixels
-    this._drawGlyphsDevice(
-      this.Render.PictOp.Over,
-      this._backgroundPicture,
-      positioned,
-    );
+    this._drawGlyphsDevice(this._op(), this._backgroundPicture, positioned);
   }
 
   /**
@@ -5164,19 +5621,6 @@ class RenderingContext2d {
     });
   }
 
-  /**
-   * Draw an image, with the three canvas signatures:
-   *
-   *   ctx.drawImage(image, dx, dy)
-   *   ctx.drawImage(image, dx, dy, dWidth, dHeight)
-   *   ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-   *
-   * `image` is an ntk `Image` (see `loadImage()` — PNG/JPEG decoded
-   * client-side, uploaded to the server once and composited from there;
-   * scaling is server-side with bilinear filtering), another
-   * RenderingContext2d, or a node-canvas-like object. Images honor the
-   * current transform (server-side, via the picture transform).
-   */
   /**
    * Clip and mask for a direct composite, as a bracket around it.
    *
@@ -5188,23 +5632,29 @@ class RenderingContext2d {
    *
    * Uniform alpha needs no surface-sized mask either: a 1x1 repeating
    * picture is the same thing to the server, with no pixel work at all.
+   *
+   * `after` says the composite takes the clip after the op rather than in
+   * its mask (`_clipAfter`), through `_compositeOnto`.
    */
-  _beginDirectComposite(box) {
+  _beginDirectComposite(box, op) {
     const rect = this._clipRect();
     if (!rect) {
       // a poly clip is the only thing left that needs a mask; without one
       // there is nothing to apply here but the alpha. The mask it does need
       // is bounded to `box`, the destination box of the composite it is for
-      // — the only pixels of it the server samples (issue #313).
-      const mask = this._hasPolyClip
-        ? this._compositeMask(box)
-        : this._alphaMask();
-      return { mask, clipped: false, empty: false };
+      // — the only pixels of it the server samples (issue #313). An op that
+      // writes where the mask is zero takes the clip after it instead.
+      const after = this._clipAfter(op);
+      const mask =
+        this._hasPolyClip && !after
+          ? this._compositeMask(box)
+          : this._alphaMask();
+      return { mask, after, clipped: false, empty: false };
     }
     if (rect.w === 0 || rect.h === 0)
-      return { mask: 0, clipped: false, empty: true };
+      return { mask: 0, after: false, clipped: false, empty: true };
     this._setPictureClip(rect);
-    return { mask: this._alphaMask(), clipped: true, empty: false };
+    return { mask: this._alphaMask(), after: false, clipped: true, empty: false };
   }
 
   _endDirectComposite(state) {
@@ -5216,14 +5666,19 @@ class RenderingContext2d {
    * into it. The mask slot is taken by the coverage, so the alpha has to go
    * somewhere — and a 1x1 solid is free, where a surface-sized alpha mask is
    * not. Falls back to the fill picture for gradients, which have no single
-   * colour to fold into; `_drawCoverage` routes those through the scratch. */
+   * colour to fold into; `_drawCoverage` routes those through the scratch.
+   *
+   * All four components are scaled, not the alpha alone: the colour is
+   * premultiplied, and one whose alpha shrank under unchanged components is
+   * brighter than it can be — `#0000ff` at 0.5 over black came out
+   * `#0000ff`, where `fillRect` draws `#000080`. */
   _coverageSource() {
     const style = this._fillStyle;
     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);
+    const c = this._foldedColor(style);
+    return this._transientSolid(c[0], c[1], c[2], c[3]);
   }
 
   /**
@@ -5234,6 +5689,10 @@ class RenderingContext2d {
    * monochrome drawing rendered once as coverage can then be painted in any
    * colour, so a hover, a disabled state and a theme change all reuse the one
    * rendered copy instead of each needing their own.
+   *
+   * The rectangles are device pixels, whatever the transform: a shadow's
+   * coverage is composited through here as it is. Under a transform,
+   * `drawImage` places coverage with `_drawCoverageTurned` instead.
    */
   _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op) {
     // Coverage the surface has none of is drawn as nothing. X takes the
@@ -5242,10 +5701,9 @@ class RenderingContext2d {
     // threw out of the paint. A NaN destination fails the test too.
     if (!(dx < this.width && dy < this.height && dx + dw > 0 && dy + dh > 0)) return;
     const R = this.Render;
-    // the coverage is painted in the current fillStyle, on both branches
-    // below — a gradient/pattern whose transform collapsed paints nothing
-    const style = this._backgroundPicture;
-    if (!prepareStyle(style, this._m, this.width, this.height)) return;
+    // the coverage is painted in the current fillStyle — a gradient/pattern
+    // whose transform collapsed paints nothing
+    if (!prepareStyle(this._backgroundPicture, this._m, this.width, this.height)) return;
     const scaled = dw !== sw || dh !== sh;
     if (scaled) {
       R.SetPictureTransform(picture.id, [
@@ -5264,15 +5722,36 @@ class RenderingContext2d {
       R.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
     }
     // with a transform in place the mask is already sampled from (sx, sy)
-    const mx = scaled ? 0 : sx;
-    const my = scaled ? 0 : sy;
+    this._paintCoverage(picture, scaled ? 0 : sx, scaled ? 0 : sy, dx, dy, dw, dh, op);
+
+    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");
+      R.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
+    }
+  }
 
+  /**
+   * The current `fillStyle` painted through coverage over the destination
+   * box (dx, dy, dw, dh): `picture`, an a8 picture, is the mask, sampled
+   * from (mx, my) at the box's corner through whatever transform its caller
+   * has put on it — a scale (`_drawCoverage`) or a turn
+   * (`_drawCoverageTurned`). The caller has prepared the style for this
+   * paint (`prepareStyle`).
+   */
+  _paintCoverage(picture, mx, my, dx, dy, dw, dh, op) {
+    const R = this.Render;
+    const style = this._backgroundPicture;
     const rect = this._clipRect();
     // 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
+    // to be intersected into the scratch mask first — a path clip, unless
+    // it is applied after the op (`_clipAfter`), and an alpha a gradient
+    // has no colour to take
+    const after = this._clipAfter(op);
     const scratch =
-      this._hasPolyClip ||
+      (this._hasPolyClip && !after) ||
       (this.globalAlpha < 1 && !isPlainColor(this._fillStyle));
 
     if (scratch) {
@@ -5300,7 +5779,7 @@ class RenderingContext2d {
       if (this.globalAlpha < 1) {
         R.Composite(
           R.PictOp.InReverse,
-          this.createSolidPicture(0, 0, 0, this.globalAlpha).id,
+          this._transientSolid(0, 0, 0, this.globalAlpha).id,
           0,
           this.fillMask.id,
           0,
@@ -5313,7 +5792,7 @@ class RenderingContext2d {
           this.height,
         );
       }
-      if (this._hasPolyClip) {
+      if (this._hasPolyClip && !after) {
         const clipMask = this._requireClipMask();
         R.Composite(
           R.PictOp.In,
@@ -5341,11 +5820,11 @@ class RenderingContext2d {
       // part of a full-surface picture: the region just cleared to zero, so
       // nothing paints at all unless dx and dy are both zero.
       const [ox, oy] = sourceOrigin(style);
-      R.Composite(
+      this._compositeOnto(
+        after,
         op,
         style.id,
         this.fillMask.id,
-        this._dst(),
         dx - ox,
         dy - oy,
         dx,
@@ -5363,11 +5842,11 @@ class RenderingContext2d {
       // exactly as in _fillPolys
       const src = this._coverageSource();
       const [ox, oy] = sourceOrigin(src);
-      R.Composite(
+      this._compositeOnto(
+        after,
         op,
         src.id,
         picture.id,
-        this._dst(),
         dx - ox,
         dy - oy,
         mx,
@@ -5379,229 +5858,410 @@ class RenderingContext2d {
       );
       if (rect) this._invalidatePictureClip();
     }
-
-    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");
-      R.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
-    }
     this._markDirty();
   }
 
-  drawImage(image, ...args) {
-    if (this._shadowed()) this._shadowOfImage(image, args);
-    if (isPictureSource(image)) {
-      let sx = 0;
-      let sy = 0;
-      let sw = image.width;
-      let sh = image.height;
-      let dx = 0;
-      let dy = 0;
-      let dw;
-      let dh;
-      if (args.length >= 8) {
-        [sx, sy, sw, sh, dx, dy, dw, dh] = args;
-      } else if (args.length >= 4) {
-        [dx, dy, dw, dh] = args;
-      } else {
-        [dx = 0, dy = 0] = args;
-        dw = sw;
-        dh = sh;
-      }
-      if (!(dw > 0) || !(dh > 0) || !(sw > 0) || !(sh > 0)) return;
-
-      const picture = image.picture(this.window.app);
-      const op = this._op();
+  /**
+   * Coverage under a transform, where `_drawImageTransformed` puts it: over
+   * `box`, the part of the whole-pixel box round the turned rectangle that
+   * the surface has, with `transform` taking that box's pixels back into the
+   * image from its corner. The turned coverage is the mask, and the fill
+   * style is painted through it as `_drawCoverage` paints it: clip,
+   * `globalAlpha` and the composite op included, and a gradient or a
+   * pattern under the transform in force, as for a fill.
+   *
+   * It used to be composited as the source, as an image is, and RENDER reads
+   * an a8 source as alpha over black: a mask drawn under any transform, a
+   * translate included, came out black whatever the fill style was.
+   */
+  _drawCoverageTurned(image, box, transform, op) {
+    // Nothing to paint: a clip rectangle the box misses, which clips every
+    // op on the server, or a style that paints nothing (`_drawCoverage`).
+    // Decided before the transform is installed, so there is none to put
+    // back.
+    const rect = this._clipRect();
+    if (rect && !intersectBox(box, rect)) return;
+    if (!prepareStyle(this._backgroundPicture, this._m, this.width, this.height)) return;
+    const R = this.Render;
+    const picture = image.picture(this.window.app);
+    R.SetPictureTransform(picture.id, transform);
+    picture.setFilter("bilinear");
+    this._paintCoverage(picture, 0, 0, box.x, box.y, box.w, box.h, op);
+    R.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
+    picture.setFilter("nearest");
+  }
 
-      if (!matIsIdentity(this._m)) {
-        this._drawImageTransformed(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
-        return;
+  /**
+   * Draw an image, with the three canvas signatures:
+   *
+   *   ctx.drawImage(image, dx, dy)
+   *   ctx.drawImage(image, dx, dy, dWidth, dHeight)
+   *   ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+   *
+   * `image` is an ntk `Image` (see `loadImage()` — PNG/JPEG decoded
+   * client-side, uploaded to the server once and composited from there), a
+   * `Surface`, anything else with a size and a `picture(app)`, another
+   * RenderingContext2d, or a node-canvas-like object. Every one of them is
+   * drawn the same way: cropped, scaled server-side with bilinear filtering,
+   * under the current transform, clipped, faded by `globalAlpha` and
+   * composited with `globalCompositeOperation`.
+   */
+  drawImage(image, ...args) {
+    // A context and a node-canvas are drawn from a picture of their pixels,
+    // as a Surface is. A context used to be composited whole at (0, 0), with
+    // Over, whatever the call asked for.
+    if (image instanceof RenderingContext2d) {
+      image = contextSource(image, this.window.app);
+    } else if (!isPictureSource(image) && isCanvasLike(image)) {
+      const source = this._canvasSource(image);
+      try {
+        this.drawImage(source, ...args);
+      } finally {
+        source.destroy();
       }
+      return;
+    }
+    if (!isPictureSource(image)) return;
+    const rects = imageRects(image, args);
+    const cut = this._spilledCrop(image, rects);
+    if (cut || this._drawsFromCopy(image, rects)) {
+      this._drawFromCopy(image, rects, cut);
+      return;
+    }
+    if (this._shadowed()) this._shadowOfImage(image, args);
 
-      if (image.format === "a8") {
-        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
-        return;
-      }
+    const [sx, sy, sw, sh, dx, dy, dw, dh] = rects;
+    if (!(dw > 0) || !(dh > 0) || !(sw > 0) || !(sh > 0)) return;
+    const app = this.window.app;
+    const op = this._op();
 
-      const state = this._beginDirectComposite({ x: dx, y: dy, w: dw, h: dh });
-      if (state.empty) return;
-      const mask = state.mask;
-      const scaled = dw !== sw || dh !== sh;
-      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");
-        // Bilinear sampling at the rim reads half a source pixel past the
-        // image, and a picture's default repeat reads transparent there: an
-        // upscaled image faded into whatever it was drawn over across its
-        // outer pixels — three of them for a 15-pixel swatch drawn at 96.
-        // The canvas spec's drawImage clamps to the image's edge, and so do
-        // browsers; RepeatPad is that. Only on this axis-aligned path, whose
-        // composite box is the destination rectangle exactly: under a
-        // rotation the box is the bounding box, and pad would paint its
-        // corners.
-        this.Render.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
-        this.Render.Composite(
-          op,
-          picture.id,
-          mask,
-          this._dst(),
-          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.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
-      } else {
-        this.Render.Composite(
-          op,
-          picture.id,
-          mask,
-          this._dst(),
-          sx,
-          sy,
-          dx,
-          dy,
-          dx,
-          dy,
-          dw,
-          dh,
-        );
-      }
-      this._endDirectComposite(state);
-      this._markDirty();
+    if (!matIsIdentity(this._m)) {
+      this._drawImageTransformed(image, sx, sy, sw, sh, dx, dy, dw, dh, op);
       return;
     }
 
-    const sWidth = image.width;
-    const sHeight = image.height;
-    const sx = 0;
-    const sy = 0;
+    if (image.format === "a8") {
+      const picture = image.picture(app);
+      this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+      return;
+    }
 
-    // Drawables reach the branch above by way of Surface, which is what a
-    // Window/Pixmap/Picture source actually needs: a size and a Picture.
-    if (image instanceof RenderingContext2d) {
-      // TODO: if need to scale, set transform
-      // TODO: respect global compositing blend mode
-      const full = { x: 0, y: 0, w: this.width, h: this.height };
-      // source and destination are both surface-aligned here, so a clip
-      // rectangle is just a smaller box to copy (issue #307)
-      const direct = this._boxedComposite(full, this.Render.PictOp.Over);
-      if (direct && !direct.box) return;
-      const box = direct ? direct.box : full;
-      this.Render.Composite(
-        this.Render.PictOp.Over,
-        image.picture.id,
-        direct ? direct.mask : this._compositeMask(box),
-        this._dst(),
-        box.x,
-        box.y,
-        box.x,
-        box.y,
-        box.x,
-        box.y,
-        box.w,
-        box.h,
+    const state = this._beginDirectComposite({ x: dx, y: dy, w: dw, h: dh }, op);
+    if (state.empty) return;
+    // only now that the clip has had its say: a node-canvas uploads here
+    const picture = image.picture(app);
+    const scaled = dw !== sw || dh !== sh;
+    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");
+      // Bilinear sampling at the rim reads half a source pixel past the
+      // image, and a picture's default repeat reads transparent there: an
+      // upscaled image faded into whatever it was drawn over across its
+      // outer pixels — three of them for a 15-pixel swatch drawn at 96.
+      // The canvas spec's drawImage clamps to the image's edge, and so do
+      // browsers; RepeatPad is that. Only on this axis-aligned path, whose
+      // composite box is the destination rectangle exactly: under a
+      // rotation the box is the bounding box, and pad would paint its
+      // corners.
+      this.Render.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
+      this._compositeOnto(
+        state.after,
+        op,
+        picture.id,
+        state.mask,
+        0,
+        0,
+        dx,
+        dy,
+        dx,
+        dy,
+        dw,
+        dh,
       );
-      this._markDirty();
-    } else if (
-      image &&
-      image.context &&
-      typeof image.context.getImageData === "function"
-    ) {
-      // node-canvas Canvas ( or any ctx with ctx.canvas.getImageData returning pixels)
-      // What the clip leaves of the composite, decided before anything is
-      // uploaded: a clip that rejects it whole makes the upload below dead
-      // work (issue #307)
-      const full = { x: 0, y: 0, w: this.width, h: this.height };
-      const direct = this._boxedComposite(full, this.Render.PictOp.Over);
-      if (direct && !direct.box) return;
-      const box = direct ? direct.box : full;
-      const imageData = image.context.getImageData(sx, sy, sWidth, sHeight);
-      // node-canvas hands over straight RGBA, and the rgba32 picture below is
-      // premultiplied — this used to swap the channels and stop there, which
-      // composited translucent images at full brightness
-      const data = fromStraightRgba(
-        imageData.data,
-        pixelLayout(this.display, 32),
-        sWidth,
-        sHeight,
+      // 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.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
+    } else {
+      this._compositeOnto(
+        state.after,
+        op,
+        picture.id,
+        state.mask,
+        sx,
+        sy,
+        dx,
+        dy,
+        dx,
+        dy,
+        dw,
+        dh,
+      );
+    }
+    this._endDirectComposite(state);
+    this._markDirty();
+  }
 
-      // One upload GC per app rather than one per call, the same sharing
-      // Image.picture does: a GC is valid for any drawable of the same screen
-      // and depth. This used to allocate a GC, a pixmap and a picture every
-      // 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,
-      });
-      try {
+  /**
+   * A node-canvas-like source as a picture source: its pixels are uploaded
+   * on first use, which is after the clip has had its say, so a draw the clip
+   * rejects uploads nothing (issue #307). `destroy()` frees the upload once
+   * the composites that read it are queued — X executes requests in order, so
+   * the server is done with it by the time it reads the frees.
+   */
+  _canvasSource(image) {
+    const app = this.window.app;
+    const { width, height } = image;
+    let pixmap = null;
+    let picture = null;
+    return {
+      width,
+      height,
+      picture: () => {
+        if (picture) return picture;
+        const imageData = image.context.getImageData(0, 0, width, height);
+        // node-canvas hands over straight RGBA, and the rgba32 picture below
+        // is premultiplied — this used to swap the channels and stop there,
+        // which composited translucent images at full brightness
+        const data = fromStraightRgba(
+          imageData.data,
+          pixelLayout(this.display, 32),
+          width,
+          height,
+        );
+        pixmap = new Pixmap(app, { depth: 32, width, height });
+        picture = new Picture(app, {
+          drawable: pixmap,
+          format: this.Render.rgba32,
+        });
+        // One upload GC per app rather than one per call, the same sharing
+        // Image.picture does: a GC is valid for any drawable of the same
+        // screen and depth. This used to allocate a GC, a pixmap and a
+        // picture every time and free none of them, so drawing a node-canvas
+        // source in an animation loop leaked three server resources a frame.
         let gc = app._imageUploadGC;
         if (!gc) {
           gc = app._imageUploadGC = this.X.AllocID();
           this.X.CreateGC(gc, pixmap.id);
         }
-        // the crop already happened in getImageData, so it lands at the
-        // pixmap's origin — sx/sy here wrote it off the edge
-        this.X.PutImage(2, pixmap.id, gc, sWidth, sHeight, 0, 0, 0, 32, data);
+        this.X.PutImage(2, pixmap.id, gc, width, height, 0, 0, 0, 32, data);
+        return picture;
+      },
+      destroy: () => {
+        picture?.destroy();
+        pixmap?.destroy();
+      },
+    };
+  }
 
-        this.Render.Composite(
-          this.Render.PictOp.Over,
-          picture.id,
-          direct ? direct.mask : this._compositeMask(box),
-          this._dst(),
-          box.x,
-          box.y,
-          box.x,
-          box.y,
-          box.x,
-          box.y,
-          box.w,
-          box.h,
-        );
-        this._markDirty();
-      } finally {
-        // the composite is queued, and X executes requests in order, so the
-        // server is done with these by the time it reads the frees
-        picture.destroy();
-        pixmap.destroy();
-      }
+  /**
+   * Whether `drawImage` has to read a copy of the image rather than its
+   * picture, because the picture holds pixels the draw must not read.
+   *
+   * Its own, first: the drawable this context draws into — the context
+   * itself, another context on the same drawable, or a Surface drawn from
+   * inside its own `render()`. A composite that reads the pixels it writes
+   * sees its own output on the servers that work row by row — pixman, so
+   * Xvfb and XQuartz, and glamor too, which hands a picture drawn onto its
+   * own pixmap to pixman — and anything drawn lower than it was read from
+   * came out smeared, each row read after a row above it had been written
+   * there. A canvas draws from the pixels as they were before the call.
+   *
+   * Then a window's, past its edge: the backing pixmap is larger than the
+   * window, and a draw that scales the image up, or puts it under a
+   * transform, filters across the edge into the background colour there,
+   * where the canvas clamps to the edge pixel (see the scaled path above).
+   */
+  _drawsFromCopy(image, rects) {
+    const drawable = image instanceof Surface ? image.pixmap : image._drawable;
+    if (!drawable) return false;
+    if (drawable.id === this._target?.id) return true;
+    const [, , sw, sh, , , dw, dh] = rects;
+    const acrossEdge = dw > sw || dh > sh || !matIsIdentity(this._m);
+    return (
+      acrossEdge &&
+      (drawable.width > image.width || drawable.height > image.height)
+    );
+  }
+
+  /**
+   * The part of the image `drawImage` has to draw from a copy of, because
+   * drawn from the image itself it would show pixels beyond the crop; null
+   * when it would not.
+   *
+   * Under a transform the composite covers the whole-pixel box around the
+   * turned destination rectangle (`turnedBox`), and samples the image through
+   * the inverse transform across all of it. Turned or skewed, the box's
+   * corners are outside the rectangle, and so are the pixels along a side
+   * that falls between two pixels; they sample the image outside the source
+   * rectangle. Past the image's own edge that reads transparent, so a whole
+   * image is drawn right — but past a crop it reads the rest of the image,
+   * which came out at the box's corners: a crop of the left half of an image
+   * turned 30° drew a wedge of its right half beside it, and one translated
+   * by a tenth of a pixel drew a column of it.
+   *
+   * Only a crop that leaves a whole pixel of the image out needs the copy,
+   * and only under a transform whose box is wider than its rectangle: the
+   * axis-aligned paths composite over the destination rectangle and nowhere
+   * else, and so does an axis-aligned transform that puts its corners on
+   * whole pixels.
+   *
+   * The copy is of the crop's own pixels and of no more (`_drawFromCopy`),
+   * and of them only the ones the composite can sample: the device box the
+   * surface and a clip leave of it, mapped back into the image, with two
+   * pixels to spare for the bilinear filter and the 16.16 transform. A draw
+   * that lands nowhere copies nothing; one mostly off the surface, or
+   * repainted through a small clip, copies the part it shows. A shadow
+   * samples the image somewhere else, so a shadowed draw copies the crop
+   * whole.
+   */
+  _spilledCrop(image, rects) {
+    if (matIsIdentity(this._m)) return null;
+    const [sx, sy, sw, sh, dx, dy, dw, dh] = rects;
+    if (!(dw > 0) || !(dh > 0) || !(sw > 0) || !(sh > 0)) return null;
+    // the pixels the crop overlaps by more than a rounding error
+    const crop = {
+      x0: Math.max(0, Math.floor(sx + SNAP)),
+      y0: Math.max(0, Math.floor(sy + SNAP)),
+      x1: Math.min(image.width, Math.ceil(sx + sw - SNAP)),
+      y1: Math.min(image.height, Math.ceil(sy + sh - SNAP)),
+    };
+    const cropped =
+      crop.x0 > 0 ||
+      crop.y0 > 0 ||
+      crop.x1 < image.width ||
+      crop.y1 < image.height;
+    if (!cropped) return null;
+    const turned = turnedBox(this._m, dx, dy, dw, dh);
+    if (turned.fills) return null;
+    // Too small for the transform to say, or nowhere the draw can show:
+    // `_drawImageTransformed` draws nothing, so nothing is copied for it.
+    const none = { x0: 0, y0: 0, x1: 0, y1: 0 };
+    const inv = matInvert(
+      matMultiply(this._m, [dw / sw, 0, 0, dh / sh, dx, dy]),
+    );
+    if (!inv || !fitsFixed(inv.slice(0, 4))) return none;
+    if (this._shadowed()) return crop;
+
+    // Nothing outside the clip is written, whatever the op, so nothing there
+    // needs reading (`_boxedComposite`, `_clipAfter`).
+    let box = intersectBox(
+      {
+        x: turned.x0,
+        y: turned.y0,
+        w: turned.x1 - turned.x0,
+        h: turned.y1 - turned.y0,
+      },
+      { x: 0, y: 0, w: this.width, h: this.height },
+    );
+    const clip = this._clipExtents();
+    if (box && clip) box = intersectBox(box, clip);
+    if (!box) return none;
+    const us = [];
+    const vs = [];
+    for (const [x, y] of [
+      [box.x, box.y],
+      [box.x + box.w, box.y],
+      [box.x, box.y + box.h],
+      [box.x + box.w, box.y + box.h],
+    ]) {
+      const [u, v] = matApply(inv, x, y);
+      us.push(sx + u);
+      vs.push(sy + v);
+    }
+    return {
+      x0: Math.max(crop.x0, Math.floor(Math.min(...us)) - 2),
+      y0: Math.max(crop.y0, Math.floor(Math.min(...vs)) - 2),
+      x1: Math.min(crop.x1, Math.ceil(Math.max(...us)) + 2),
+      y1: Math.min(crop.y1, Math.ceil(Math.max(...vs)) + 2),
+    };
+  }
+
+  /**
+   * `drawImage` from a copy of the part of the image it reads, `cut`: by
+   * default the source rectangle and the pixel around it bilinear filtering
+   * reads inside the destination, cut at the image's edge, so the copy draws
+   * what the image itself would have. The copy is taken before a shadow is
+   * drawn, which would otherwise land on the pixels it is a shadow of. It is
+   * argb32, which holds any source of 8 bits a channel exactly, or a8 for
+   * coverage.
+   *
+   * A crop that spills (`_spilledCrop`) is cut with no pixel around it:
+   * beyond the copy's edge the transformed composite reads transparent, so a
+   * crop turned or skewed is drawn as the same pixels cut out into an image
+   * of their own would be, its edges fading out over a pixel as the image's
+   * own edges do. A pixel around it would come back as a band of what is
+   * beside the crop, all along the outside of its edge.
+   */
+  _drawFromCopy(image, rects, cut = null) {
+    const [sx, sy, sw, sh, dx, dy, dw, dh] = rects;
+    if (!(dw > 0) || !(dh > 0) || !(sw > 0) || !(sh > 0)) return;
+    const { x0, y0, x1, y1 } = cut ?? {
+      x0: Math.max(0, Math.floor(sx) - 1),
+      y0: Math.max(0, Math.floor(sy) - 1),
+      x1: Math.min(image.width, Math.ceil(sx + sw) + 1),
+      y1: Math.min(image.height, Math.ceil(sy + sh) + 1),
+    };
+    // the crop holds none of the image, or none the draw can show
+    if (!(x1 > x0 && y1 > y0)) return;
+    const width = x1 - x0;
+    const height = y1 - y0;
+    const app = this.window.app;
+    const R = this.Render;
+    const coverage = image.format === "a8";
+    const pixmap = new Pixmap(app, { depth: coverage ? 8 : 32, width, height });
+    const picture = new Picture(app, {
+      drawable: pixmap,
+      format: coverage ? R.a8 : R.rgba32,
+    });
+    try {
+      R.Composite(
+        R.PictOp.Src,
+        image.picture(app).id,
+        0,
+        picture.id,
+        x0,
+        y0,
+        0,
+        0,
+        0,
+        0,
+        width,
+        height,
+      );
+      const copy = {
+        width,
+        height,
+        format: image.format,
+        picture: () => picture,
+      };
+      this.drawImage(copy, sx - x0, sy - y0, sw, sh, dx, dy, dw, dh);
+    } finally {
+      // queued behind the composites that read it
+      picture.destroy();
+      pixmap.destroy();
     }
   }
 
   // general-affine drawImage: fold CTM + dest rect + source offset into the
-  // source picture transform and composite over the transformed bbox
-  _drawImageTransformed(picture, sx, sy, sw, sh, dx, dy, dw, dh, op) {
+  // source picture transform and composite over the transformed bbox — or,
+  // for coverage, into the mask's (`_drawCoverageTurned`)
+  _drawImageTransformed(image, sx, sy, sw, sh, dx, dy, dw, dh, op) {
     // maps source-local (u, v) in [0..sw)x[0..sh) to device coordinates
     const M = matMultiply(this._m, [dw / sw, 0, 0, dh / sh, dx, dy]);
     const inv = matInvert(M);
@@ -5612,23 +6272,14 @@ class RenderingContext2d {
     // pixel across for any image X can hold, and nothing to see.
     if (!fitsFixed(inv.slice(0, 4))) return;
 
-    // device bbox of the transformed dest rect, clamped to the canvas
-    const corners = [
-      matApply(this._m, dx, dy),
-      matApply(this._m, dx + dw, dy),
-      matApply(this._m, dx, 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]))),
-    );
+    // device bbox of the transformed dest rect, clamped to the canvas. A crop
+    // has been cut out of the image by now wherever this box is wider than
+    // the rectangle (`_spilledCrop`).
+    const turned = turnedBox(this._m, dx, dy, dw, dh);
+    const x0 = Math.max(0, turned.x0);
+    const y0 = Math.max(0, turned.y0);
+    const x1 = Math.min(this.width, turned.x1);
+    const y1 = Math.min(this.height, turned.y1);
     if (x1 <= x0 || y1 <= y0) return;
 
     // Device -> source sample, measured from the bounding box's corner: the
@@ -5649,30 +6300,42 @@ class RenderingContext2d {
     // rather than thrown out of the paint.
     if (!fitsFixed([e, f])) return;
 
+    const bbox = { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+    const transform = [a, c, e, b, d, f, 0, 0, 1];
+    // coverage is the mask, and the fill style the source
+    if (image.format === "a8") {
+      this._drawCoverageTurned(image, bbox, transform, op);
+      return;
+    }
+
     // A rectangular clip shrinks the box instead of becoming a mask (issue
     // #307). Decided before the picture transform is installed, so a draw
     // the clip rejects does not have to put it back.
-    const bbox = { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
-    const direct = this._boxedComposite(bbox, op);
+    const direct = this._boxedComposite(bbox);
     if (direct && !direct.box) return;
-    const box = direct ? direct.box : bbox;
 
-    this.Render.SetPictureTransform(picture.id, [a, c, e, b, d, f, 0, 0, 1]);
+    const picture = image.picture(this.window.app);
+    this.Render.SetPictureTransform(picture.id, transform);
     picture.setFilter("bilinear");
-    this.Render.Composite(
-      op,
-      picture.id,
-      direct ? direct.mask : this._compositeMask(box),
-      this._dst(),
-      box.x - x0,
-      box.y - y0,
-      box.x,
-      box.y,
-      box.x,
-      box.y,
-      box.w,
-      box.h,
-    );
+    if (direct) {
+      const box = direct.box;
+      this.Render.Composite(
+        op,
+        picture.id,
+        direct.mask,
+        this._dst(),
+        box.x - x0,
+        box.y - y0,
+        box.x,
+        box.y,
+        box.x,
+        box.y,
+        box.w,
+        box.h,
+      );
+    } else {
+      this._compositeMasked(op, picture.id, 0, 0, bbox);
+    }
     this.Render.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
     picture.setFilter("nearest");
     this._markDirty();