ntk 8.23.0 → 8.23.2

package/lib/image.js

@@ -3,7 +3,7 @@ import { PNG } from 'pngjs';
 
 import { builtin } from './builtin.js';
 import { fromStraightRgba, pixelLayout } from './imagedata.js';
-import Picture from './picture.js';
+import Picture, { OWN_PICTURE } from './picture.js';
 
 /**
  * A decoded raster image: `width`, `height` and non-premultiplied RGBA
@@ -31,10 +31,17 @@ export class Image {
 
   /**
    * The server-side Picture for this image on `app`'s display (uploaded
-   * and cached on first use). Used by `ctx.drawImage`; useful directly
-   * when compositing manually via the Render extension.
+   * and cached on first use), read as stored: no transform, the `nearest`
+   * filter, no repeat. Useful directly when compositing manually via the
+   * Render extension; set anything else on it through the Picture's own
+   * `setTransform`/`setFilter`/`setRepeat`.
    */
   picture(app) {
+    return this[OWN_PICTURE](app)._settle();
+  }
+
+  /** The picture as ntk's draws left it (`drawImage` sets what it needs). */
+  [OWN_PICTURE](app) {
     let upload = this._uploads.get(app);
     if (upload) return upload.picture;
 
@@ -87,7 +94,7 @@ export class Image {
    * this image everywhere else.
    */
   pixmap(app) {
-    this.picture(app);
+    this[OWN_PICTURE](app);
     return this._uploads.get(app).pixmap;
   }
 

package/lib/picture.js

@@ -7,6 +7,18 @@ const registry = new FinalizationRegistry(({ Render, X, id }) => {
   });
 });
 
+/** RENDER's identity transform, row-major as `SetPictureTransform` takes it. */
+export const IDENTITY_TRANSFORM = Object.freeze([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+const NO_PARAMS = Object.freeze([]);
+
+/**
+ * The picture an `Image` or a `Surface` keeps for ntk's own draws, without
+ * putting it back as stored (`picture(app)` does that): `drawImage` reads it
+ * through and leaves its state for the next draw to set
+ * (docs/context-2d.md#how-an-image-is-read).
+ */
+export const OWN_PICTURE = Symbol('ntk.ownPicture');
+
 export default class Picture {
   constructor(app, args = {}) {
     const X = app.X;
@@ -23,6 +35,20 @@ export default class Picture {
     }
     this._owned = true;
     registry.register(this, { Render: this.Render, X, id: this.id }, this);
+    // How the server reads the picture — its transform, filter and repeat —
+    // as last set through the methods below, so a draw that needs what is
+    // there already sends nothing. Flipping them is not free: a filter
+    // changed and changed back around every composite cost Xwayland's glamor
+    // 36 ms over 256 composites where the composites took 0.6, and a
+    // transform put back to identity after each cost pixman 7.
+    this._transform = IDENTITY_TRANSFORM;
+    this._filter = 'nearest';
+    this._filterParams = NO_PARAMS;
+    this._repeat = args.repeat ?? 0;
+    // Whether what the picture is read through now is what a draw left
+    // (`_readThrough`) rather than what was set on it: the one `_settle`
+    // puts back. A filter hung on a surface to be drawn through stays.
+    this._leftByDraw = false;
   }
 
   /**
@@ -32,9 +58,67 @@ export default class Picture {
    *
    * That is what makes it right for resampling (`'bilinear'` under a
    * transform) and a trap for anything expensive: see `setBlurFilter`.
+   *
+   * Nothing is sent when the picture has this filter already.
    */
-  setFilter(name, params) {
+  setFilter(name, params = NO_PARAMS) {
+    this._leftByDraw = false;
+    if (name === this._filter && sameNumbers(params, this._filterParams)) return;
     this.Render.SetPictureFilter(this.id, name, params);
+    this._filter = name;
+    this._filterParams = params.length ? params.slice() : NO_PARAMS;
+  }
+
+  /**
+   * Set the transform the picture is read through: nine numbers, row-major,
+   * taking a destination point to the source point read for it, as RENDER's
+   * `SetPictureTransform` has them. Nothing is sent when it is the one the
+   * picture has.
+   */
+  setTransform(m) {
+    this._leftByDraw = false;
+    if (sameNumbers(m, this._transform)) return;
+    this.Render.SetPictureTransform(this.id, m);
+    this._transform = sameNumbers(m, IDENTITY_TRANSFORM) ? IDENTITY_TRANSFORM : m.slice();
+  }
+
+  /** Set how the picture is read past its edge — RENDER's `repeat`: 0 none,
+   * 1 normal, 2 pad, 3 reflect. Nothing is sent when it is so already. */
+  setRepeat(repeat) {
+    this._leftByDraw = false;
+    if (repeat === this._repeat) return;
+    this.Render.ChangePicture(this.id, { repeat });
+    this._repeat = repeat;
+  }
+
+  /**
+   * Read as stored: no transform, the `nearest` filter and no repeat — how a
+   * composite takes the pixels themselves. What a picture is left as by a
+   * draw that read it some other way is put back here, and only what differs
+   * is sent.
+   */
+  plain() {
+    this.setTransform(IDENTITY_TRANSFORM);
+    this.setFilter('nearest');
+    this.setRepeat(0);
+    return this;
+  }
+
+  /** A draw reading the picture through these, and leaving them for the
+   * next draw to set (docs/context-2d.md#how-an-image-is-read). */
+  _readThrough(transform, filter, repeat) {
+    this.setTransform(transform);
+    this.setFilter(filter);
+    this.setRepeat(repeat);
+    this._leftByDraw = true;
+  }
+
+  /** Put back what a draw left, and nothing that was set on the picture:
+   * what `Image.picture(app)` and `Surface.picture(app)` hand out, and what a
+   * draw that reads the pixels as they are reads. */
+  _settle() {
+    if (this._leftByDraw) this.plain();
+    return this;
   }
 
   /**
@@ -93,6 +177,13 @@ export default class Picture {
   }
 }
 
+function sameNumbers(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
 // normalized 2d gaussian, row-major size x size
 function gaussianKernel(size, sigma) {
   const kernel = new Array(size * size);

package/lib/renderingcontext_2d.js

@@ -25,7 +25,7 @@ import {
   subpathHead,
   subpathTail,
 } from "./path.js";
-import Picture from "./picture.js";
+import Picture, { OWN_PICTURE } from "./picture.js";
 import { formatForDepth } from "./pictformat.js";
 import Pixmap from "./pixmap.js";
 import { REGION_DOCS, regionId } from "./region.js";
@@ -564,6 +564,58 @@ function contextSource(ctx, app) {
   };
 }
 
+/**
+ * The picture a draw reads `image` through, and whether ntk keeps it. An
+ * `Image`'s and a `Surface`'s are kept: nothing reads them but ntk's draws
+ * and their `picture(app)`, which puts one back as stored first, so a draw
+ * sets the transform, filter and repeat it reads through (`readAs`) and
+ * leaves them for the next. A surface drawn through a matrix a tile at a
+ * time had each tile's transform and filter set, and both put back after
+ * it: five requests a tile where two do, and the putting back was most of
+ * the server's time (docs/context-2d.md#how-an-image-is-read). Any other
+ * picture — a context's own, a caller's handed in through a `picture(app)`
+ * of its own — is put back as stored once read (`readDone`), as every draw
+ * used to put back every picture.
+ */
+function sourcePicture(image, app) {
+  const own = image[OWN_PICTURE];
+  return own
+    ? { picture: own.call(image, app), kept: true }
+    : { picture: image.picture(app), kept: false };
+}
+
+/** Have `picture` read through `transform`, `filter` and `repeat`. An ntk
+ * Picture sends only what it does not have; a caller's handle, which may be
+ * no more than an id and a `setFilter`, is sent all of it. */
+function readAs(R, picture, transform, filter, repeat) {
+  if (picture instanceof Picture) {
+    picture._readThrough(transform, filter, repeat);
+    return;
+  }
+  R.SetPictureTransform(picture.id, transform);
+  picture.setFilter(filter);
+  if (repeat) R.ChangePicture(picture.id, { repeat });
+}
+
+/** After `readAs`: a picture ntk does not keep is put back as stored. */
+function readDone(R, picture, kept, repeat) {
+  if (kept) return;
+  if (picture instanceof Picture) {
+    picture.plain();
+    return;
+  }
+  R.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
+  picture.setFilter("nearest");
+  if (repeat) R.ChangePicture(picture.id, { repeat: 0 });
+}
+
+/** Before a read of `picture`'s pixels as they are. One ntk does not keep
+ * is so at rest; one it keeps is put back from whatever the last draw left,
+ * and a filter set on it is kept, as it always was. */
+function readPlain(picture, kept) {
+  if (kept) picture._settle();
+}
+
 function destroyedSourceError() {
   return new Error(
     "drawImage: the 2d context passed as the image has been destroyed — by\n" +
@@ -753,6 +805,10 @@ class RenderingContext2d {
     this.fillMaskDrawable = null;
     this.clipMask = null;
     this.clipMaskDrawable = null;
+    // a clip mask a restore let go of, for the next path clip (`_rebuildClipMask`)
+    this._keptClipMask = null;
+    // where the clip mask may hold coverage, [x, y, w, h]; null for nowhere
+    this._clipMaskInk = null;
     this._textStyle = null;
     this._lastFontString = null;
     this.textAlign = "start";
@@ -1172,6 +1228,8 @@ class RenderingContext2d {
       this.clipMaskDrawable.destroy();
       this.clipMask = this.clipMaskDrawable = null;
     }
+    // one kept is the size the surface was
+    this._dropKeptClipMask();
     // clip paths are device-space and survive the resize; rebuild the mask
     if (this._clips && this._clips.length) this._rebuildClipMask();
   }
@@ -1586,8 +1644,9 @@ class RenderingContext2d {
     const source = this._fillSource;
     this.fillStyle = this._shadowColor;
     try {
+      const { picture, kept } = sourcePicture(surface, this.window.app);
       this._drawCoverage(
-        surface.picture(this.window.app),
+        picture,
         0,
         0,
         surface.width,
@@ -1597,6 +1656,7 @@ class RenderingContext2d {
         surface.width,
         surface.height,
         this._op(),
+        kept,
       );
     } finally {
       this._fillStyle = style;
@@ -1992,7 +2052,10 @@ class RenderingContext2d {
       this._shadowTile(plan),
     );
     if (!tile) return false;
-    const picture = tile.picture(app);
+    // A piece drawn at its own size reads the tile as stored and a stretched
+    // one through its scale: `_drawCoverage` sets each, and sends only what
+    // the piece before did not leave.
+    const { picture, kept } = sourcePicture(tile, app);
     // put back as it was, as _paintShadow does
     const style = this._fillStyle;
     const source = this._fillSource;
@@ -2003,16 +2066,7 @@ class RenderingContext2d {
         if (clip && !boxesMeet({ x: dx, y: dy, width: dw, height: dh }, clip)) {
           continue;
         }
-        // a piece drawn at its own size reads the tile as it is: undo the
-        // transform the last stretched one left on the picture
-        if (sw === dw && sh === dh && picture._tileScaled) {
-          this.Render.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
-          picture.setFilter("nearest");
-          picture._tileScaled = false;
-        } else if (sw !== dw || sh !== dh) {
-          picture._tileScaled = true;
-        }
-        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept);
       }
     } finally {
       this._fillStyle = style;
@@ -2313,6 +2367,16 @@ class RenderingContext2d {
 
   _ensureClipMask() {
     if (this.clipMask) return;
+    const kept = this._keptClipMask;
+    if (kept) {
+      // the one a restore let go of: what it holds is cleared where it was
+      // written, by `_materializeClipMask`
+      this._keptClipMask = null;
+      this.clipMask = kept.mask;
+      this.clipMaskDrawable = kept.drawable;
+      this._clipMaskInk = kept.ink;
+      return;
+    }
     this.clipMaskDrawable = new Pixmap(this.window.app, {
       depth: 8,
       width: this.width,
@@ -2322,6 +2386,8 @@ class RenderingContext2d {
       drawable: this.clipMaskDrawable,
       format: this.Render.a8,
     });
+    // a fresh pixmap's contents are undefined, all of them
+    this._clipMaskInk = [0, 0, this.width, this.height];
   }
 
   /**
@@ -4852,12 +4918,16 @@ class RenderingContext2d {
   _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],
-    );
+    // Cleared where it may hold coverage, not all over: the mask is the size
+    // of the surface, and a clip a rounded row of a list puts on a window
+    // cleared the whole window's worth of it for each row of each frame.
+    // What it holds is never outside its first shape's box, since what is
+    // intersected with it only takes coverage away (`_clipMaskInk`).
+    const ink = this._clipMaskInk;
+    if (ink && ink[2] > 0 && ink[3] > 0) {
+      R.FillRectangles(R.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], ink);
+    }
+    this._clipMaskInk = null;
     // region entries are the picture's clip, not the mask's business
     const shapes = this._clips.filter((entry) => !entry.region);
     if (!shapes.length) {
@@ -4867,6 +4937,7 @@ class RenderingContext2d {
         [0, 0, 0, 1],
         [0, 0, this.width, this.height],
       );
+      this._clipMaskInk = [0, 0, this.width, this.height];
       return;
     }
     const first = shapes[0];
@@ -4883,9 +4954,20 @@ class RenderingContext2d {
           [0, 0, 0, 1],
           [x, y, right - x, bottom - y],
         );
+        this._clipMaskInk = [x, y, right - x, bottom - y];
       }
     } else {
       this._applyPolyClip(first, R.PictOp.Src);
+      const bb = this._polysBBox(first.polys);
+      if (bb && bb.w > 0 && bb.h > 0) {
+        const x = Math.max(0, Math.floor(bb.x));
+        const y = Math.max(0, Math.floor(bb.y));
+        const right = Math.min(this.width, Math.ceil(bb.x + bb.w));
+        const bottom = Math.min(this.height, Math.ceil(bb.y + bb.h));
+        if (right > x && bottom > y) {
+          this._clipMaskInk = [x, y, right - x, bottom - y];
+        }
+      }
     }
     for (let i = 1; i < shapes.length; i++) this._intersectClip(shapes[i]);
   }
@@ -5036,9 +5118,18 @@ class RenderingContext2d {
     if (!rasterizer) return false;
     const { shapes, edges } = fillableShapes(entry.polys);
     if (!shapes.length) return false;
-    // routed by the clip's own extent, as a fill is (`_rawBox`), and
-    // rasterized over the part of it on the surface
-    if (this._routeFor(this._polysExtent(entry.polys) ?? bb, edges) !== "local")
+    // A clip's coverage is rasterized here up to the policy's byte bound,
+    // whatever its edges, where a fill is routed by its cost (`_routeFor`).
+    // The server route is AddTraps into the pixmap the coverage lands on,
+    // and AddTraps adds into a picture that exists: glamor — Xwayland's,
+    // and Xorg's on most GPUs — has no GPU path for it, and reads the
+    // pixmap back, rasterizes in software and uploads it again, a GPU sync
+    // for every clip. A rounded row clipped that way took 5.6 ms on a virgl
+    // Xwayland, where its raster here and a PutImage took 0.14; pixman,
+    // which adds the traps itself, takes 0.03 ms less for it.
+    const extent = this._polysExtent(entry.polys) ?? bb;
+    const area = Math.min(extent.w, this.width) * Math.min(extent.h, this.height);
+    if (!(area > 0 && area <= this.window.app.rasterPolicy.maxBytes) || !edges)
       return false;
 
     const coverage = rasterizer.rasterize({
@@ -5100,17 +5191,33 @@ class RenderingContext2d {
   }
 
   _rebuildClipMask() {
-    // The stack changed shape (restore, resize): drop the mask rather than
+    // The stack changed shape (restore, resize): let the mask go 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.
+    // It is kept, not destroyed, for the next path clip to fill again: a
+    // pixmap the size of the surface was made and freed for every rounded
+    // clip, sixteen a frame for a list of eight rounded rows, where the fill
+    // mask beside it is kept for the context's life.
     if (this.clipMask) {
-      this.clipMask.destroy();
-      this.clipMaskDrawable.destroy();
+      this._dropKeptClipMask();
+      this._keptClipMask = {
+        mask: this.clipMask,
+        drawable: this.clipMaskDrawable,
+        ink: this._clipMaskInk,
+      };
       this.clipMask = this.clipMaskDrawable = null;
     }
   }
 
+  _dropKeptClipMask() {
+    const kept = this._keptClipMask;
+    if (!kept) return;
+    this._keptClipMask = null;
+    kept.mask.destroy();
+    kept.drawable.destroy();
+  }
+
   isPointInPath(...args) {
     let path = null;
     let rest = args;
@@ -5694,7 +5801,7 @@ class RenderingContext2d {
    * 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) {
+  _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept = false) {
     // Coverage the surface has none of is drawn as nothing. X takes the
     // destination's corner in 16 bits, and a shadow thrown past it — an
     // offset of 65,535, or text a million pixels away with its shadow —
@@ -5705,31 +5812,15 @@ class RenderingContext2d {
     // whose transform collapsed paints nothing
     if (!prepareStyle(this._backgroundPicture, this._m, this.width, this.height)) return;
     const scaled = dw !== sw || dh !== sh;
+    // the edge clamped when scaled, as drawImage's scaled path explains
     if (scaled) {
-      R.SetPictureTransform(picture.id, [
-        sw / dw,
-        0,
-        sx,
-        0,
-        sh / dh,
-        sy,
-        0,
-        0,
-        1,
-      ]);
-      picture.setFilter("bilinear");
-      // the edge clamped, as drawImage's scaled path explains
-      R.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
+      readAs(R, picture, [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1], "bilinear", 2);
+    } else {
+      readPlain(picture, kept);
     }
     // with a transform in place the mask is already sampled from (sx, 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
-    }
+    if (scaled) readDone(R, picture, kept, 2);
   }
 
   /**
@@ -5883,12 +5974,12 @@ class RenderingContext2d {
     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");
+    const { picture, kept } = sourcePicture(image, this.window.app);
+    // no repeat: under a turn the box is the bounding box, and a padded
+    // edge would paint its corners
+    readAs(R, picture, transform, "bilinear", 0);
     this._paintCoverage(picture, 0, 0, box.x, box.y, box.w, box.h, op);
-    R.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
-    picture.setFilter("nearest");
+    readDone(R, picture, kept, 0);
   }
 
   /**
@@ -5941,31 +6032,19 @@ class RenderingContext2d {
     }
 
     if (image.format === "a8") {
-      const picture = image.picture(app);
-      this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+      const { picture, kept } = sourcePicture(image, app);
+      this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept);
       return;
     }
 
     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 { picture, kept } = sourcePicture(image, 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");
+      // The picture transform maps composite coordinates into source
+      // samples: dest pixel (i, j) reads (sx + i*sw/dw, sy + j*sh/dh).
       // 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
@@ -5975,7 +6054,13 @@ class RenderingContext2d {
       // 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
+      readAs(
+        this.Render,
+        picture,
+        [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1],
+        "bilinear",
+        2, // Repeat.Pad
+      );
       this._compositeOnto(
         state.after,
         op,
@@ -5990,14 +6075,9 @@ class RenderingContext2d {
         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
+      readDone(this.Render, picture, kept, 2);
     } else {
+      readPlain(picture, kept);
       this._compositeOnto(
         state.after,
         op,
@@ -6230,9 +6310,11 @@ class RenderingContext2d {
       format: coverage ? R.a8 : R.rgba32,
     });
     try {
+      const { picture: from, kept } = sourcePicture(image, app);
+      readPlain(from, kept);
       R.Composite(
         R.PictOp.Src,
-        image.picture(app).id,
+        from.id,
         0,
         picture.id,
         x0,
@@ -6314,9 +6396,9 @@ class RenderingContext2d {
     const direct = this._boxedComposite(bbox);
     if (direct && !direct.box) return;
 
-    const picture = image.picture(this.window.app);
-    this.Render.SetPictureTransform(picture.id, transform);
-    picture.setFilter("bilinear");
+    const { picture, kept } = sourcePicture(image, this.window.app);
+    // no repeat: the box is the bounding box of the turned rectangle
+    readAs(this.Render, picture, transform, "bilinear", 0);
     if (direct) {
       const box = direct.box;
       this.Render.Composite(
@@ -6336,8 +6418,7 @@ class RenderingContext2d {
     } 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");
+    readDone(this.Render, picture, kept, 0);
     this._markDirty();
   }
 }

package/lib/shadow.js

@@ -118,7 +118,7 @@ function halveCoverage(surface, R) {
   const small = new Surface(surface.app, { width, height, format: 'a8' });
   const picture = surface.picture();
   picture.setFilter('bilinear');
-  R.SetPictureTransform(picture.id, [2, 0, 0, 0, 2, 0, 0, 0, 1]);
+  picture.setTransform([2, 0, 0, 0, 2, 0, 0, 0, 1]);
   R.Composite(R.PictOp.Src, picture.id, 0, small.picture().id, 0, 0, 0, 0, 0, 0, width, height);
   surface.destroy();
   return small;
@@ -143,7 +143,7 @@ function expandCoverage(small, width, height, scale, R) {
   const out = new Surface(small.app, { width, height, format: 'a8' });
   const picture = small.picture();
   picture.setFilter('bilinear');
-  R.SetPictureTransform(picture.id, [1 / scale, 0, 0, 0, 1 / scale, 0, 0, 0, 1]);
+  picture.setTransform([1 / scale, 0, 0, 0, 1 / scale, 0, 0, 0, 1]);
   R.Composite(R.PictOp.Src, picture.id, 0, out.picture().id, 0, 0, 0, 0, 0, 0, width, height);
   small.destroy();
   return out;

package/lib/surface.js

@@ -1,4 +1,4 @@
-import Picture from './picture.js';
+import Picture, { OWN_PICTURE } from './picture.js';
 import Pixmap from './pixmap.js';
 import { safeRelease } from './cleanup.js';
 
@@ -62,10 +62,16 @@ export class Surface {
     return this.width * this.height * (this.depth === 8 ? 1 : 4);
   }
 
-  /** The server-side Picture, on the app this surface belongs to. Mirrors
+  /** The server-side Picture, on the app this surface belongs to, read as
+   * stored: no transform, the `nearest` filter, no repeat. Mirrors
    * `Image.picture(app)` so `drawImage` can take either without asking which
    * it has. */
   picture(app) {
+    return this[OWN_PICTURE](app)._settle();
+  }
+
+  /** The picture as ntk's draws left it (`drawImage` sets what it needs). */
+  [OWN_PICTURE](app) {
     if (app && app !== this.app) {
       throw new Error('Surface: belongs to a different X connection');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.23.0",
+  "version": "8.23.2",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",