react-x11 2.38.0 → 2.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.38.0",
+  "version": "2.40.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -109,9 +109,9 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.22.0",
+    "@windowkit/appkit": "^0.24.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.6",
+    "@windowkit/win32": "^0.0.7",
     "dbus-native": "^0.16.0",
     "x11-dri": "^0.9.0"
   },

package/src/acceleratorhooks.js

@@ -9,6 +9,8 @@
 import { useEffect, useMemo, useRef } from 'react';
 
 import { matchesShortcut } from './accelerators.js';
+import { useAppOrNull } from './appcontext.js';
+import { primaryModifier } from './keysyms.js';
 import { useTopLevelWindow } from './windowid.js';
 
 /**
@@ -52,10 +54,20 @@ function warnUnanchored() {
  * *not* a dependency: a chord pressed three minutes from now must run the
  * handler from the current render, and re-registering on every render would
  * also reorder the bindings under it.
+ *
+ * `reserves(ev)`, read the same way, says the key belongs to something
+ * outside the window that answers it by itself — a delegated `MenuBar`'s
+ * key equivalents on the Cocoa backend — so no binding gets it
+ * (`EventManager._runAccelerators`).
  */
-export function useAcceleratorEntry(anchorRef, handle, enabled = true) {
-  const live = useRef(handle);
-  live.current = handle;
+export function useAcceleratorEntry(
+  anchorRef,
+  handle,
+  enabled = true,
+  reserves = null,
+) {
+  const live = useRef({ handle, reserves });
+  live.current = { handle, reserves };
   useEffect(() => {
     if (!enabled) return undefined;
     const manager = anchorRef.current?.root?.events;
@@ -65,7 +77,8 @@ export function useAcceleratorEntry(anchorRef, handle, enabled = true) {
     }
     return manager.registerAccelerator({
       anchor: () => anchorRef.current ?? null,
-      handle: (ev) => live.current?.(ev) ?? false,
+      handle: (ev) => live.current.handle?.(ev) ?? false,
+      reserves: (ev) => live.current.reserves?.(ev) ?? false,
     });
   }, [anchorRef, enabled]);
 }
@@ -78,7 +91,8 @@ export function useAcceleratorEntry(anchorRef, handle, enabled = true) {
  * a shortcut can be moved into or out of a menu without being rewritten, and
  * the same rules apply to it: exact on Control/Alt/Shift/Super, indifferent
  * to Caps Lock and Num Lock, matched against the Latin keysym so it survives
- * a layout switch, and behind whatever a focused element consumed with
+ * a layout switch, `Control` meaning ⌘ on the Cocoa backend
+ * (`primaryModifier`), and behind whatever a focused element consumed with
  * `preventDefault()`.
  *
  * The handler is called with the key event, and the key is consumed.
@@ -106,12 +120,14 @@ export function useAccelerator(shortcut, handler, options = {}) {
       },
     [scope, owner],
   );
-  const live = useRef({ shortcut, handler });
-  live.current = { shortcut, handler };
+  const primary = primaryModifier(useAppOrNull());
+  const live = useRef({ shortcut, handler, primary });
+  live.current = { shortcut, handler, primary };
   useAcceleratorEntry(
     anchorRef,
     (ev) => {
-      if (!matchesShortcut(ev, live.current.shortcut)) return false;
+      const { shortcut: chords, primary: mod } = live.current;
+      if (!matchesShortcut(ev, chords, { primary: mod })) return false;
       live.current.handler?.(ev);
       return true;
     },

package/src/accelerators.js

@@ -25,6 +25,16 @@
 // bit 1 and Num Lock is normally Mod2, so neither is in the comparison to
 // begin with. This is the line every hand-rolled binding gets wrong, which is
 // most of why it is here rather than in an application.
+//
+// ## Which modifier `Control` is
+//
+// The app's primary one (`primaryModifier`, src/keysyms.js): Ctrl, except on
+// the Cocoa backend, where a cross-platform chord's `Control` is ⌘ — the rule
+// a menu bar's key equivalents (cocoa/globalmenu.js) and a drawn row's label
+// (`formatShortcut`) already follow, so the key a menu prints is the key that
+// fires it. `Super` is ⌘ there too, and ⌃ has no token: a chord is matched
+// with it up. The matcher is pure, so the primary is an option rather than
+// something it looks up; the hooks hand it the app's.
 
 import {
   isEnabled,
@@ -68,17 +78,21 @@ export function chordKeysym(chord) {
  * The second path is **letters excluded** deliberately: it is exactly what
  * would make Ctrl+Shift+S fire a Ctrl+S binding, which is the thing the
  * modifier comparison is here to prevent.
+ *
+ * `primary` is the app's primary modifier: `'Super'` reads `Control` as ⌘,
+ * the way the Cocoa backend's menus print and install it.
  */
-export function matchesChord(ev, chord) {
+export function matchesChord(ev, chord, { primary = 'Control' } = {}) {
   const { modifiers, key } = splitChord(chord);
   if (key == null) return false;
   const wanted = keysymFromName(key);
   if (wanted === undefined) return false;
 
-  const ctrl = modifiers.has('Control');
+  const mac = primary === 'Super';
+  const ctrl = !mac && modifiers.has('Control');
   const alt = modifiers.has('Alt');
   const shift = modifiers.has('Shift');
-  const meta = modifiers.has('Super');
+  const meta = modifiers.has('Super') || (mac && modifiers.has('Control'));
   if (
     Boolean(ev?.ctrlKey) !== ctrl ||
     Boolean(ev?.altKey) !== alt ||
@@ -98,11 +112,14 @@ export function matchesChord(ev, chord) {
   return (!shift || Boolean(ev?.shiftKey)) && ev?.codepoint === wanted;
 }
 
-/** Does this key event press any alternative of an `aas` shortcut? */
-export function matchesShortcut(ev, shortcut) {
+/**
+ * Does this key event press any alternative of an `aas` shortcut? `options`
+ * is `matchesChord`'s: `{ primary }`.
+ */
+export function matchesShortcut(ev, shortcut, options) {
   if (!Array.isArray(shortcut)) return false;
   return shortcut.some(
-    (chord) => Array.isArray(chord) && matchesChord(ev, chord),
+    (chord) => Array.isArray(chord) && matchesChord(ev, chord, options),
   );
 }
 
@@ -117,11 +134,11 @@ export function matchesShortcut(ev, shortcut) {
  * the walk goes on, so a disabled "Save" does not also swallow the key from
  * whatever else claims it.
  */
-export function acceleratedItem(items, ev) {
+export function acceleratedItem(items, ev, options) {
   for (const item of visibleItems(items)) {
     if (isSeparator(item) || !isEnabled(item)) continue;
-    if (matchesShortcut(ev, item.shortcut)) return item;
-    const inner = acceleratedItem(item.items, ev);
+    if (matchesShortcut(ev, item.shortcut, options)) return item;
+    const inner = acceleratedItem(item.items, ev, options);
     if (inner) return inner;
   }
   return null;

package/src/backend/context2d.js

@@ -27,6 +27,13 @@ import { cssColorStraight } from 'ntk/color';
 
 import { normalizeRadii, planShadowTiles } from 'ntk/shadow-tiles';
 
+import {
+  filterColour,
+  filterPixels,
+  filterStops,
+  filters,
+  parseCanvasFilter,
+} from './filter.js';
 import { shadowTilesFor } from './shadowtiles.js';
 
 const BLACK = [0, 0, 0, 1];
@@ -107,6 +114,37 @@ function uploadImage(native, image) {
   return handle;
 }
 
+/** `drawImage`'s arguments as the eight numbers of its longest form, the
+ *  source rect and then the destination, whichever form they came in. */
+function imageRects(size, args) {
+  let sx = 0;
+  let sy = 0;
+  let sw = size.width;
+  let sh = size.height;
+  let dx;
+  let dy;
+  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, dy] = args;
+    dw = sw;
+    dh = sh;
+  }
+  return [sx, sy, sw, sh, dx, dy, dw, dh];
+}
+
+/** Free a bitmap of the context's own making now, on a bridge that can;
+ *  an older one frees it with the handle's finalizer. */
+function release(native, handle) {
+  if (typeof native.releaseSurface === 'function') {
+    native.releaseSurface(handle);
+  }
+}
+
 /** Free an Image's bitmap now, if it has one; drawing it again uploads it
  * again, as ntk's `destroy()` promises for its own copies. */
 export function releaseImageUpload(image) {
@@ -393,6 +431,13 @@ function meets(a, b) {
   );
 }
 
+/** The qualities `imageSmoothingQuality` takes, canvas's. */
+const SMOOTHING_QUALITIES = new Set(['low', 'medium', 'high']);
+
+/** What the bridge is told to resample with: the quality, or the nearest
+ *  pixel where smoothing is off. */
+const smoothingOf = (st) => (st.smoothing ? st.smoothingQuality : 'none');
+
 /**
  * The off switch for shadow tiles (src/backend/shadowtiles.js): every
  * shadow drawn by the bridge, as before them. For measuring the tiles
@@ -453,6 +498,13 @@ export class BackendContext2D {
       // null: nothing clipped. A rect (surface pixels): that rect. NON_RECT:
       // a clip this class cannot name.
       clip: null,
+      // how an image drawn scaled or turned is resampled
+      smoothing: true,
+      smoothingQuality: 'medium',
+      // canvas's `filter` as it was set, and what it comes to
+      // (src/backend/filter.js): null for none
+      filter: 'none',
+      filterInk: null,
     };
     // What this bridge can do, asked once. Both verbs arrived together in
     // @windowkit/appkit 0.7.0, and anything older is a bridge that draws
@@ -461,6 +513,18 @@ export class BackendContext2D {
     // blit path is simply never taken.
     this._blendModes = typeof native.ctxSetBlendMode === 'function';
     this._blits = typeof native.blitSurface === 'function';
+    // and how an image is resampled, @windowkit/appkit 0.23.0's — asked
+    // with `in` as well, as `ctxPath` is below: a test's bridge that answers
+    // every name must not look like one that has it
+    this._smoothing =
+      'ctxSetImageSmoothing' in native &&
+      typeof native.ctxSetImageSmoothing === 'function';
+    // and what a filter is applied to pixels with: reading a surface and
+    // writing one, which every Cocoa bridge has had since 0.4 — asked all
+    // the same, so a bridge without them keeps `filter` at none
+    this._filters = ['createSurface', 'ctxGetImageData', 'ctxPutImageData']
+      .map((name) => name in native && typeof native[name] === 'function')
+      .every(Boolean);
     this._onDirty = null;
     // the recorded path, and whether the native one still matches it (a
     // chunked stroke leaves only its last chunk behind)
@@ -527,6 +591,10 @@ export class BackendContext2D {
       if (this._blendModes && st.gco !== 'source-over') {
         n.ctxSetBlendMode(surface, st.gco);
       }
+      // and one made at 'medium', which a context starts at
+      if (this._smoothing && smoothingOf(st) !== 'medium') {
+        n.ctxSetImageSmoothing(surface, smoothingOf(st));
+      }
       // a fresh surface is unclipped, whatever the old one had in force
       st.clip = null;
       this._stack.length = 0;
@@ -642,6 +710,86 @@ export class BackendContext2D {
     this._state.gco = value;
   }
 
+  /**
+   * Canvas's `imageSmoothingEnabled` and `imageSmoothingQuality`: how an
+   * image or a surface drawn scaled or turned is resampled — the nearest
+   * pixel with smoothing off, and otherwise `'low'`, which is bilinear,
+   * `'medium'` or `'high'`. A context starts at `'medium'`, which is what
+   * the bridge makes its contexts at, and not at canvas's `'low'`: an image
+   * drawn small keeps the quality it was drawn at. Both are state `save`
+   * and `restore` keep.
+   *
+   * On macOS `'medium'` resamples the whole source for a draw through a
+   * matrix, whatever the clip, so a surface drawn a tile at a time through
+   * a perspective — `<Html>`'s box out of the plane — costs each tile all
+   * of it: 784 tiles of a 1400x1120 surface took 200 ms on an M1 Pro, and
+   * 27 at `'low'` (windowkit/appkit#109).
+   *
+   * A bridge with no `ctxSetImageSmoothing` keeps both where they start,
+   * so a caller learns whether an assignment took by reading it back, as
+   * with `globalCompositeOperation`.
+   */
+  get imageSmoothingEnabled() {
+    return this._state.smoothing;
+  }
+
+  set imageSmoothingEnabled(value) {
+    if (!this._smoothing) return;
+    // the surface first: a fresh one is told the state it is taking over
+    const surface = this._s();
+    this._state.smoothing = !!value;
+    this._native.ctxSetImageSmoothing(surface, smoothingOf(this._state));
+  }
+
+  get imageSmoothingQuality() {
+    return this._state.smoothingQuality;
+  }
+
+  set imageSmoothingQuality(value) {
+    if (!this._smoothing || !SMOOTHING_QUALITIES.has(value)) return;
+    const surface = this._s();
+    this._state.smoothingQuality = value;
+    this._native.ctxSetImageSmoothing(surface, smoothingOf(this._state));
+  }
+
+  /**
+   * Canvas's `filter`: a CSS `<filter-value-list>` applied to everything
+   * drawn after it, which `save` and `restore` keep. This context applies
+   * the colour functions — `grayscale()`, `sepia()`, `saturate()`,
+   * `hue-rotate()`, `invert()`, `brightness()`, `contrast()` — and
+   * `opacity()` (src/backend/filter.js): a fill, a stroke, a gradient, a
+   * glyph run and a symbol in the colours the filter makes of theirs; an
+   * image, a surface and a text layout that carries colours of its own
+   * through their pixels. A list with `blur()`, `drop-shadow()` or a
+   * `url()` in it, or what is no list, does not stick, nor does any on a
+   * bridge that cannot read a surface's pixels back: a caller knows
+   * whether an assignment took by reading it back, as with
+   * `globalCompositeOperation`. The value reads back as it was written.
+   */
+  get filter() {
+    return this._state.filter;
+  }
+
+  set filter(value) {
+    if (!this._filters) return;
+    const ink = parseCanvasFilter(value);
+    if (ink === undefined) return;
+    this._state.filter = ink === null ? 'none' : String(value).trim();
+    this._state.filterInk = filters(ink) ? ink : null;
+  }
+
+  /** A straight `[r, g, b, a]` as the filter in force draws it. */
+  _ink(rgba) {
+    const ink = this._state.filterInk;
+    return ink ? filterColour(rgba, ink) : rgba;
+  }
+
+  /** A gradient's flat stops as the filter in force draws them. */
+  _stops(flat) {
+    const ink = this._state.filterInk;
+    return ink ? filterStops(flat, ink) : flat;
+  }
+
   /**
    * Whether a stroke of a path with many subpaths may go out as several
    * `CGContextStrokePath` calls — on by default, because the alternative
@@ -1188,12 +1336,12 @@ export class BackendContext2D {
   }
 
   _applyFill() {
-    const [r, g, b, a] = parseColor(this._state.fillStyle);
+    const [r, g, b, a] = this._ink(parseColor(this._state.fillStyle));
     this._native.ctxSetFillColor(this._s(), r, g, b, a);
   }
 
   _applyStroke() {
-    const [r, g, b, a] = parseColor(this._state.strokeStyle);
+    const [r, g, b, a] = this._ink(parseColor(this._state.strokeStyle));
     this._native.ctxSetStrokeColor(this._s(), r, g, b, a);
   }
 
@@ -1305,7 +1453,8 @@ export class BackendContext2D {
     this._path();
     const style = this._state.fillStyle;
     if (style instanceof LinearGradient) {
-      const { coords, flat } = style._normalized();
+      const { coords, flat: stops } = style._normalized();
+      const flat = this._stops(stops);
       this._native.ctxFillLinearGradient(
         this._s(),
         coords[0],
@@ -1384,10 +1533,16 @@ export class BackendContext2D {
     if (!plan) return false;
     const clip = st.clip === NON_RECT ? null : st.clip;
     if (clip && !meets(plan.bounds, clip)) return true;
-    const tile = shadowTilesFor(this._native).get(
-      plan,
-      parseColor(st.shadowColor),
-    );
+    // the shadow of what a filter's `opacity()` fades is faded with it;
+    // its colour is the shadow's own, cast after the filter (canvas)
+    const [sr, sg, sb, sa] = parseColor(st.shadowColor);
+    const fade = st.filterInk?.alpha ?? 1;
+    const tile = shadowTilesFor(this._native).get(plan, [
+      sr,
+      sg,
+      sb,
+      sa * fade,
+    ]);
     if (tile == null) return false;
     const s = this._s();
     const n = this._native;
@@ -1441,16 +1596,19 @@ export class BackendContext2D {
     this._dirty();
   }
 
-  clip(pathOrRule) {
-    if (
-      pathOrRule != null &&
-      typeof pathOrRule === 'object' &&
-      !this._replayPath(pathOrRule)
-    ) {
-      return;
-    }
+  /**
+   * `clip()`, `clip(rule)`, `clip(path)`, `clip(path, rule)`, as canvas has
+   * them and as `fill` takes them. The rule reaches the bridge as the flag
+   * `ctxFill` takes: SvgView cuts to a `<clipPath>` with its `clip-rule`, and
+   * a ring clipped `evenodd` by nonzero is a filled square. A bridge that
+   * predates the flag ignores it and clips nonzero, as every bridge did.
+   */
+  clip(pathOrRule, maybeRule) {
+    const hasPath = pathOrRule != null && typeof pathOrRule === 'object';
+    const rule = hasPath ? maybeRule : pathOrRule;
+    if (hasPath && !this._replayPath(pathOrRule)) return;
     this._state.clip = this._clipAfter();
-    this._native.ctxClip(this._path());
+    this._native.ctxClip(this._path(), rule === 'evenodd');
   }
 
   /**
@@ -1466,6 +1624,10 @@ export class BackendContext2D {
    * sets — the damage rect, a scroll viewport, a square-cornered `overflow`
    * — are whole pixels under a translate, and those are the ones this
    * recognises.
+   *
+   * It answers for either fill rule. One rect is one closed subpath, wound
+   * once round everything inside it, so `evenodd` and `nonzero` cut the
+   * same pixels; a path of more than one shape is never a rect here.
    */
   _pathRect() {
     const cmds = this._cmds;
@@ -1527,7 +1689,8 @@ export class BackendContext2D {
   _fillRectNow(x, y, w, h) {
     const style = this._state.fillStyle;
     if (style instanceof LinearGradient) {
-      const { coords, flat } = style._normalized();
+      const { coords, flat: stops } = style._normalized();
+      const flat = this._stops(stops);
       this._native.ctxFillLinearGradient(
         this._s(),
         coords[0],
@@ -1592,22 +1755,11 @@ export class BackendContext2D {
     const src = this._sourceHandle(image);
     if (!src) return;
     const size = this._native.surfaceSize(src);
-    let sx = 0;
-    let sy = 0;
-    let sw = size.width;
-    let sh = size.height;
-    let dx;
-    let dy;
-    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, dy] = args;
-      dw = sw;
-      dh = sh;
+    const [sx, sy, sw, sh, dx, dy, dw, dh] = imageRects(size, args);
+    const ink = this._state.filterInk;
+    if (ink) {
+      this._drawFiltered(src, size, [sx, sy, sw, sh, dx, dy, dw, dh], ink);
+      return;
     }
     if (this._blit(src, sx, sy, sw, sh, dx, dy, dw, dh)) {
       // a row memcpy
@@ -1642,6 +1794,44 @@ export class BackendContext2D {
     this._dirty();
   }
 
+  /**
+   * `drawImage` under a filter: the whole pixels of the source the source
+   * rect covers, read from the bridge as they are, run through the filter,
+   * put on a bitmap of their own, and that drawn as the source would have
+   * been — the filter set aside for the draw, which a blit, a fade and the
+   * resampling an `imageSmoothingQuality` sets all take as before.
+   */
+  _drawFiltered(src, size, [sx, sy, sw, sh, dx, dy, dw, dh], ink) {
+    const x0 = Math.max(0, Math.floor(sx));
+    const y0 = Math.max(0, Math.floor(sy));
+    const w = Math.min(size.width, Math.ceil(sx + sw)) - x0;
+    const h = Math.min(size.height, Math.ceil(sy + sh)) - y0;
+    if (!(w > 0 && h > 0)) return;
+    const n = this._native;
+    const pixels = n.ctxGetImageData(src, x0, y0, w, h);
+    filterPixels(pixels, pixels, ink);
+    const filtered = n.createSurface(w, h, 1);
+    const st = this._state;
+    try {
+      n.ctxPutImageData(filtered, pixels, w, h, 0, 0);
+      st.filterInk = null;
+      this.drawImage(
+        { _surfaceHandle: filtered },
+        sx - x0,
+        sy - y0,
+        sw,
+        sh,
+        dx,
+        dy,
+        dw,
+        dh,
+      );
+    } finally {
+      st.filterInk = ink;
+      release(n, filtered);
+    }
+  }
+
   /**
    * Whether a surface is drawn under this `globalAlpha` from its pixels
    * scaled by it (@windowkit/appkit's `ctxDrawSurfaceFaded`): where the
@@ -1906,7 +2096,7 @@ export class BackendContext2D {
       }
     }
     if (batches.size === 0) return;
-    const [r, g, b, a] = this._inkOf(src);
+    const [r, g, b, a] = this._ink(this._inkOf(src));
     const surface = this._s();
     this._native.ctxSetFillColor(surface, r, g, b, a);
     const runs = [];
@@ -1945,10 +2135,15 @@ export class BackendContext2D {
   // --- text (minimal: enough for <canvas onDraw> users) --------------------
 
   _drawLayout(layout, x, y) {
+    if (!layout._contextInk && this._state.filterInk) {
+      this._drawLayoutFiltered(layout, x, y, this._state.filterInk);
+      return;
+    }
     if (layout._contextInk) {
       const style = this._state.fillStyle;
       if (style instanceof LinearGradient) {
-        const { coords, flat } = style._normalized();
+        const { coords, flat: stops } = style._normalized();
+        const flat = this._stops(stops);
         this._native.drawLayoutGradient(
           this._s(),
           layout._handle,
@@ -1969,6 +2164,68 @@ export class BackendContext2D {
     this._dirty();
   }
 
+  /**
+   * A layout that carries colours of its own, under a filter: the bridge
+   * sets its glyphs in them, so it is drawn on a bitmap of its own the size
+   * of where it lands on the surface — its box through the transform, and
+   * half its height more each way for ink past the box — through the same
+   * transform, and the bitmap is run through the filter and drawn where it
+   * came from.
+   */
+  _drawLayoutFiltered(layout, x, y, ink) {
+    const st = this._state;
+    const [a, b, c, d, e, f] = st.ctm;
+    const pad = (layout.height || 0) / 2;
+    const left = x - pad;
+    const top = y - pad;
+    const right = x + (layout.width || 0) + pad;
+    const bottom = y + (layout.height || 0) + pad;
+    let X0 = Infinity;
+    let Y0 = Infinity;
+    let X1 = -Infinity;
+    let Y1 = -Infinity;
+    for (const [px, py] of [
+      [left, top],
+      [right, top],
+      [left, bottom],
+      [right, bottom],
+    ]) {
+      const qx = a * px + c * py + e;
+      const qy = b * px + d * py + f;
+      X0 = Math.min(X0, qx);
+      Y0 = Math.min(Y0, qy);
+      X1 = Math.max(X1, qx);
+      Y1 = Math.max(Y1, qy);
+    }
+    const size = this._native.surfaceSize(this._s());
+    X0 = Math.max(0, Math.floor(X0));
+    Y0 = Math.max(0, Math.floor(Y0));
+    X1 = Math.min(size.width, Math.ceil(X1));
+    Y1 = Math.min(size.height, Math.ceil(Y1));
+    const w = X1 - X0;
+    const h = Y1 - Y0;
+    if (!(w > 0 && h > 0)) return;
+    const n = this._native;
+    const own = n.createSurface(w, h, 1);
+    try {
+      n.ctxTransform(own, a, b, c, d, e - X0, f - Y0);
+      n.drawLayout(own, layout._handle, x, y);
+      const pixels = n.ctxGetImageData(own, 0, 0, w, h);
+      filterPixels(pixels, pixels, ink);
+      n.ctxPutImageData(own, pixels, w, h, 0, 0);
+      this.save();
+      try {
+        this._state.filterInk = null;
+        this.setTransform(1, 0, 0, 1, 0, 0);
+        this.drawImage({ _surfaceHandle: own }, X0, Y0);
+      } finally {
+        this.restore();
+      }
+    } finally {
+      release(n, own);
+    }
+  }
+
   measureText(text) {
     const layout = this._fontLayout(text);
     return layout