ntk 8.17.4 → 8.17.6

package/lib/renderingcontext_2d.js

@@ -387,15 +387,52 @@ function patternSourceOf(app, source) {
  * after a `translate` moves with the fill, and one created under a translate
  * and filled without it does not).
  *
- * Returns false when nothing would be painted (a singular matrix), true for
- * anything else, including every plain-colour style.
+ * Returns false when nothing would be painted (a singular matrix, or one
+ * the wire cannot carry), true for anything else, including every
+ * plain-colour style. `width` and `height` are the surface's: the style's
+ * source origin is kept on it (`sourceOrigin`).
  */
-function prepareStyle(src, m) {
+function prepareStyle(src, m, width, height) {
   return src instanceof CanvasPattern || src instanceof CanvasGradient
-    ? src._sync(m)
+    ? src._sync(m, width, height)
     : true;
 }
 
+const NO_ORIGIN = Object.freeze([0, 0]);
+
+/**
+ * Where a composite samples `src` from, as a device point: each composite
+ * that reads a style at its destination's own coordinates passes those
+ * coordinates less this as its source offset.
+ *
+ * A gradient's or a pattern's picture transform is the inverse of the CTM,
+ * and sampling it at device coordinates put the CTM's translation, times
+ * its downscale, into the transform: a box a fortieth of its size at x
+ * 2,200 asked for 88,000, past what 16.16 fixed point carries. `_sync`
+ * folds this origin into the transform instead, and puts it where the
+ * style's own origin lands, so the translation is small wherever on the
+ * surface the style is painted. Everything else — a solid, a picture —
+ * samples at device coordinates, from (0, 0).
+ */
+function sourceOrigin(src) {
+  return src instanceof CanvasPattern || src instanceof CanvasGradient
+    ? src._origin
+    : NO_ORIGIN;
+}
+
+/**
+ * The origin `_sync` picks for a style whose own origin lands at device
+ * (x, y): the nearest whole pixel, kept on the surface. On it, a composite's
+ * source offset — its destination's, less this — is within the surface's
+ * size of 0, which the 16-bit field carries whatever the transform; and the
+ * transform's translation is the style's coordinate there, which for a
+ * style painted on the surface is one the fill samples anyway.
+ */
+function originOn(x, y, width, height) {
+  const on = (v, size) => (v > 0 ? Math.min(Math.round(v), size) : 0);
+  return [on(x, width), on(y, height)];
+}
+
 /**
  * Whether every entry can be written as XRender's 16.16 fixed point, whose
  * whole part is a signed 16-bit number. A picture transform is written that
@@ -2387,14 +2424,15 @@ class RenderingContext2d {
       );
     }
     // src is either a 1x1 repeating solid (offset irrelevant) or a
-    // surface-aligned gradient, so it is sampled at the same offset too
+    // gradient/pattern, sampled at the same offset from its own origin
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      out.x,
-      out.y,
+      out.x - ox,
+      out.y - oy,
       out.x,
       out.y,
       out.x,
@@ -2417,7 +2455,7 @@ class RenderingContext2d {
     op = op ?? this._op();
     alpha = alpha ?? this.globalAlpha;
     if (alpha <= 0) return;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
 
     // one box per subpath, so a path holding disjoint ones can be masked as
     // the pieces it is rather than as the box around all of them — each the
@@ -2473,7 +2511,7 @@ class RenderingContext2d {
   _strokePolys(polys, { src = null } = {}) {
     src = src ?? this._strokePicture;
     if (this.globalAlpha <= 0) return;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
     // approximate transform-aware line width by the average scale factor
     const det = this._m[0] * this._m[3] - this._m[1] * this._m[2];
     const scale = Math.sqrt(Math.abs(det)) || 1;
@@ -2841,6 +2879,7 @@ class RenderingContext2d {
       op === this.Render.PictOp.Over;
     const chunk = 4000 * 6;
     if (direct) {
+      const [ox, oy] = sourceOrigin(src);
       this._cullTris(tris);
       if (!tris.length) return;
       const cut = this._wireCut(tris);
@@ -2858,11 +2897,12 @@ class RenderingContext2d {
         // convention drawGlyphRuns and compositeTraps use — without it every
         // non-constant stroke style (a gradient, a pattern) is offset by
         // wherever the stroke happens to start, and shifts as it moves.
+        // Less the style's own origin, as every fill samples it.
         this.Render.Triangles(
           op,
           src.id,
-          Math.floor(batch[0]),
-          Math.floor(batch[1]),
+          Math.floor(batch[0]) - ox,
+          Math.floor(batch[1]) - oy,
           this._dst(),
           this.Render.a8,
           batch,
@@ -3128,7 +3168,7 @@ class RenderingContext2d {
   _drawGlyphsDevice(op, src, positioned) {
     const app = this.window.app;
     const R = this.Render;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
     if (!this._hasPolyClip) {
       // Fast path: a rectangular clip is something the server can do itself.
       // Two small requests around the ordinary glyph composite, instead of
@@ -3148,6 +3188,7 @@ class RenderingContext2d {
         this._dst(),
         positioned,
         rect ?? { x: 0, y: 0, w: this.width, h: this.height },
+        sourceOrigin(src),
       );
       if (rect) this._invalidatePictureClip();
       this._markDirty();
@@ -3185,13 +3226,14 @@ class RenderingContext2d {
       this.width,
       this.height,
     );
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      0,
-      0,
+      -ox,
+      -oy,
       0,
       0,
       0,
@@ -3218,7 +3260,16 @@ class RenderingContext2d {
         if (rect.w === 0 || rect.h === 0) return;
         this._setPictureClip(rect);
       }
-      compositeTraps(app, op, src.id, this._dst(), traps);
+      compositeTraps(
+        app,
+        op,
+        src.id,
+        this._dst(),
+        traps,
+        undefined,
+        undefined,
+        sourceOrigin(src),
+      );
       if (rect) this._invalidatePictureClip();
       this._markDirty();
       return;
@@ -3253,13 +3304,14 @@ class RenderingContext2d {
       this.width,
       this.height,
     );
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      0,
-      0,
+      -ox,
+      -oy,
       0,
       0,
       0,
@@ -3497,7 +3549,8 @@ class RenderingContext2d {
         w = x1 - x0;
         h = y1 - y0;
       }
-      if (!prepareStyle(this._backgroundPicture, this._m)) return;
+      const style = this._backgroundPicture;
+      if (!prepareStyle(style, this._m, this.width, this.height)) return;
       const op = this._op();
       // A rectangular clip is a smaller rectangle to fill, not a mask — this
       // was the one drawing path that still built a surface-sized a8 for one
@@ -3509,13 +3562,14 @@ class RenderingContext2d {
         w > 0 && h > 0 ? this._boxedComposite({ x, y, w, h }, op) : 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,
-        this._backgroundPicture.id,
+        style.id,
         direct ? direct.mask : this._compositeMask(box),
         this._dst(),
-        box.x,
-        box.y,
+        box.x - ox,
+        box.y - oy,
         box.x,
         box.y,
         box.x,
@@ -3667,7 +3721,8 @@ class RenderingContext2d {
       if (y + h > y1) y1 = y + h;
     }
     if (!disjointRects(rects)) return false;
-    if (!prepareStyle(this._backgroundPicture, this._m)) return true;
+    const style = this._backgroundPicture;
+    if (!prepareStyle(style, this._m, this.width, this.height)) return true;
     // the box they cover, on the surface: nothing outside it is sampled
     const bx = Math.max(0, x0);
     const by = Math.max(0, y0);
@@ -3701,13 +3756,14 @@ class RenderingContext2d {
       bw,
       bh,
     );
+    const [ox, oy] = sourceOrigin(style);
     R.Composite(
       op,
-      this._backgroundPicture.id,
+      style.id,
       mask,
       this._dst(),
-      bx,
-      by,
+      bx - ox,
+      by - oy,
       bx,
       by,
       bx,
@@ -5156,7 +5212,8 @@ class RenderingContext2d {
     const R = this.Render;
     // the coverage is painted in the current fillStyle, on both branches
     // below — a gradient/pattern whose transform collapsed paints nothing
-    if (!prepareStyle(this._backgroundPicture, this._m)) return;
+    const style = this._backgroundPicture;
+    if (!prepareStyle(style, this._m, this.width, this.height)) return;
     const scaled = dw !== sw || dh !== sh;
     if (scaled) {
       R.SetPictureTransform(picture.id, [
@@ -5246,18 +5303,19 @@ class RenderingContext2d {
         this._setPictureClip(rect);
       }
       // The scratch mask is surface-sized and surface-aligned — the coverage
-      // went into it at (dx, dy) — and so is a gradient source, so both are
-      // sampled at the destination offset. Reading either from (0, 0) draws a
-      // dw x dh window out of the wrong part of a full-surface picture: for
-      // the mask that is the region just cleared to zero, so nothing paints at
-      // all unless dx and dy are both zero.
+      // went into it at (dx, dy) — so it is sampled at the destination
+      // offset, and a gradient or pattern at that offset from its origin.
+      // Reading the mask from (0, 0) draws a dw x dh window out of the wrong
+      // 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(
         op,
-        this._backgroundPicture.id,
+        style.id,
         this.fillMask.id,
         this._dst(),
-        dx,
-        dy,
+        dx - ox,
+        dy - oy,
         dx,
         dy,
         dx,
@@ -5269,15 +5327,17 @@ class RenderingContext2d {
     } else if (!rect || (rect.w > 0 && rect.h > 0)) {
       if (rect) this._setPictureClip(rect);
       // the source is a 1x1 repeating solid (offset irrelevant) or the fill
-      // picture, which for a gradient is surface-aligned: same offset as the
-      // destination, exactly as in _fillPolys
+      // style, sampled at the destination's offset from its own origin,
+      // exactly as in _fillPolys
+      const src = this._coverageSource();
+      const [ox, oy] = sourceOrigin(src);
       R.Composite(
         op,
-        this._coverageSource().id,
+        src.id,
         picture.id,
         this._dst(),
-        dx,
-        dy,
+        dx - ox,
+        dy - oy,
         mx,
         my,
         dx,
@@ -5618,6 +5678,9 @@ class CanvasGradient {
     // what the server currently holds: a fresh gradient picture is
     // untransformed, so an untransformed fill costs no extra request
     this._applied = [1, 0, 0, 1, 0, 0];
+    // the device point fills sample it from (`sourceOrigin`), set with the
+    // transform it belongs with
+    this._origin = NO_ORIGIN;
 
     this.x0 = p0;
     this.y0 = p1;
@@ -5707,13 +5770,14 @@ class CanvasGradient {
   /**
    * Make the server-side mapping match the CTM this paint runs under. The
    * gradient's own coordinates are user space and every fill samples the
-   * source at device coordinates, so the picture transform — which takes a
-   * source coordinate to a gradient one — is the CTM's inverse.
+   * source at device coordinates less `_origin`, so the picture transform —
+   * which takes a source coordinate to a gradient one — is the CTM's
+   * inverse, from that origin.
    *
    * Returns false when the CTM collapses (a zero scale), which paints
    * nothing, exactly as the canvas spec says.
    */
-  _sync(ctm) {
+  _sync(ctm, width = 0, height = 0) {
     let inv = matInvert(ctm);
     if (!inv) return false;
     const id = this.id; // lazily creates the picture
@@ -5721,9 +5785,13 @@ class CanvasGradient {
     // much nearer its origin
     const k = this._scale;
     if (k !== 1) inv = inv.map((v) => v / k);
+    // sampled from where user space's origin lands (`sourceOrigin`)
+    const origin = originOn(ctm[4], ctm[5], width, height);
+    inv = matMultiply(inv, [1, 0, 0, 1, origin[0], origin[1]]);
     // the transform is 16.16 fixed point too: one that cannot be carried
     // fills nothing, rather than throwing the rest of the paint away
     if (!fitsFixed(inv)) return false;
+    this._origin = origin;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||
@@ -5801,6 +5869,7 @@ class CanvasPattern {
     // what the server currently holds: a fresh picture is untransformed and
     // filtered nearest, so an untransformed fill costs no extra request
     this._applied = [1, 0, 0, 1, 0, 0];
+    this._origin = NO_ORIGIN;
     this._filter = "nearest";
   }
 
@@ -5844,20 +5913,36 @@ class CanvasPattern {
    * Make the server-side mapping match `ctm ∘ patternMatrix`. XRender's
    * picture transform runs the other way — it takes a coordinate in the
    * composite's source space (which every fill here keeps equal to device
-   * space) to a texel — so it is the inverse.
+   * space less `_origin`) to a texel — so it is the inverse, from that
+   * origin.
    *
    * Returns false when that composition collapses (a zero scale), which
    * paints nothing, exactly as the canvas spec says.
    */
-  _sync(ctm) {
+  _sync(ctm, width = 0, height = 0) {
     const m = matMultiply(ctm, this._m);
-    const inv = matInvert(m);
+    let inv = matInvert(m);
     if (!inv) return false;
-    // 16.16 fixed point, as a gradient's is: a tile scaled down far from
-    // the origin puts its device position times the downscale into the
-    // translation, and one that cannot be carried fills nothing rather than
-    // throwing the rest of the paint away
+    // sampled from where the tile's origin lands (`sourceOrigin`)
+    const origin = originOn(m[4], m[5], width, height);
+    inv = matMultiply(inv, [1, 0, 0, 1, origin[0], origin[1]]);
+    // A tile that repeats is the same a whole number of tiles along, so the
+    // translation — the texel the origin samples — is taken to the first
+    // tile. A grid scrolled 100,000 pixels has its origin far off the
+    // surface and samples texels 100,000 along; from the first tile they
+    // are in reach of the wire.
+    const period =
+      this._repeat === 1 ? 1 : this._repeat === 3 ? 2 : 0; // Normal, Reflect
+    if (period && this.width > 0 && this.height > 0) {
+      const pw = this.width * period;
+      const ph = this.height * period;
+      inv[4] -= pw * Math.floor(inv[4] / pw);
+      inv[5] -= ph * Math.floor(inv[5] / ph);
+    }
+    // 16.16 fixed point, as a gradient's is: one that cannot be carried
+    // fills nothing rather than throwing the rest of the paint away
     if (!fitsFixed(inv)) return false;
+    this._origin = origin;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||

package/lib/text/fontsource.js

@@ -54,7 +54,8 @@ import {
   noFontsError,
   prewarmFaces,
   prewarmPatterns,
-  supported
+  supported,
+  weightRank
 } from '../fontconfig.js';
 import Font from './font.js';
 
@@ -178,14 +179,16 @@ export class FontconfigFontSource {
  *   source.alias('sans-serif', 'DejaVu Sans');
  *   const app = await createClient({ fontSource: source });
  *
- * Matching mirrors fontconfig semantics: every added face is a fallback
+ * Matching mirrors the system path: every added face is a fallback
  * candidate; faces matching a requested family (in list order) rank first,
- * then closest weight, then style. Coverage checks use the real font
- * tables, so per-codepoint fallback works exactly like the system path.
+ * then within a family the style, then the weight CSS's font matching picks
+ * (CSS Fonts 4 §5.2) — as the fontconfig source does, so a family answers
+ * alike from either. Coverage checks use the real font tables, so
+ * per-codepoint fallback works exactly like the system path.
  */
 export class StaticFontSource {
   constructor() {
-    this._faces = []; // { font, family, weight, italic, candidate }
+    this._faces = []; // { font, family, weight: [lo, hi], italic, candidate }
     this._aliases = new Map(); // 'sans-serif' -> 'dejavu sans'
     this._n = 0;
     /** files a font spec could not parse: [{ file, error }] */
@@ -196,7 +199,9 @@ export class StaticFontSource {
    * Register a font.
    * @param {Uint8Array|Buffer|Font} data font file bytes (or an open Font)
    * @param {object} [opts] { family (alias for matching; defaults to the
-   *   font's family name), weight, style, postscriptName (face of a .ttc) }
+   *   font's family name), weight, style, postscriptName (face of a .ttc) }.
+   *   A `weight` is the face's, as @font-face's descriptor is; without one a
+   *   variable face holds every weight on its `wght` axis.
    * @returns {Font}
    */
   add(data, opts = {}) {
@@ -208,10 +213,12 @@ export class StaticFontSource {
             postscriptName: opts.postscriptName
           });
     const detected = detectStyle(font);
+    const axis = font.variationAxes.wght;
+    const weight = opts.weight !== undefined ? numericWeight(opts.weight) : detected.weight;
     this._faces.push({
       font,
       family: (opts.family || font.familyName || '').toLowerCase(),
-      weight: opts.weight !== undefined ? numericWeight(opts.weight) : detected.weight,
+      weight: axis && opts.weight === undefined ? [axis.min, axis.max] : [weight, weight],
       italic:
         opts.style !== undefined ? String(opts.style).includes('italic') : detected.italic,
       candidate: null
@@ -234,8 +241,8 @@ export class StaticFontSource {
    *
    * This is not cosmetic. Every widget default in the toolkit is
    * `sans-serif`, and `code`/`pre` ask for `monospace`; with no alias for
-   * them `matchSorted` ranks every face equally and breaks the tie on weight
-   * distance and then insertion order, so `monospace` silently renders in a
+   * them `matchSorted` ranks every face equally and breaks the tie on style
+   * and weight and then insertion order, so `monospace` silently renders in a
    * proportional face. Inference happens automatically for a source built
    * from a font spec; a hand-built source calls this when it wants it.
    *
@@ -278,16 +285,19 @@ export class StaticFontSource {
     const weight = numericWeight(pattern.weight);
     const italic = !!(pattern.style && String(pattern.style).includes('italic'));
 
+    // family, then style, then weight in CSS's order; the sort is stable, so
+    // faces alike in all three stay in the order they were added
     const scored = this._faces.map((face) => {
       let rank = families.indexOf(face.family);
       if (rank === -1) rank = families.length; // non-matching faces trail
       return {
         face,
-        score:
-          rank * 1e6 + (face.italic !== italic ? 1e4 : 0) + Math.abs(face.weight - weight)
+        ranks: [rank, face.italic !== italic ? 1 : 0, weightRank(weight, face.weight, 400, 500)]
       };
     });
-    scored.sort((a, b) => a.score - b.score);
+    scored.sort(
+      (a, b) => a.ranks[0] - b.ranks[0] || a.ranks[1] - b.ranks[1] || a.ranks[2] - b.ranks[2]
+    );
     return scored.map(({ face }) => {
       if (!face.candidate) {
         // the font's own family name, not the (lowercased, possibly aliased)

package/lib/text/glyphs.js

@@ -583,8 +583,12 @@ export function routeGlyphSize(app, font, size, policy = policyOf(app), textRend
  * @param {{x: number, y: number, w: number, h: number}} [bounds] the part of
  *   the destination that can show anything — the clip, or the surface. A
  *   glyph wholly outside it is not sent (`visibleGlyph`).
+ * @param {[number, number]} [srcOrigin] the destination point the source's
+ *   (0, 0) is aligned with. A gradient or pattern the 2d context has
+ *   transformed samples from its own origin; anything else is aligned with
+ *   the destination, from (0, 0).
  */
-export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
+export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null, srcOrigin = [0, 0]) {
   const policy = policyOf(app);
   let bitmap = positioned;
   let vector = null;
@@ -602,8 +606,8 @@ export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null)
       bitmap.push(positioned[i]);
     }
   }
-  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy, bounds);
-  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector, bounds);
+  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy, bounds, srcOrigin);
+  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector, bounds, srcOrigin);
 }
 
 /**
@@ -630,7 +634,7 @@ function visibleGlyph(bounds, x, y, size) {
   );
 }
 
-function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds) {
+function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds, srcOrigin) {
   const Render = app.display.Render;
   const items = [];
   let bits = 8;
@@ -652,8 +656,9 @@ function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds)
   const encoded = encodeGlyphItems(items, bits);
   if (!encoded) return;
   // srcX/srcY align the source with the FIRST glyph's origin (RENDER spec);
-  // passing that origin itself makes source coordinates equal destination
-  // coordinates, so gradient fill styles line up with canvas space
+  // passing that origin itself, less the source's own, makes source
+  // coordinates destination coordinates from there, so gradient fill styles
+  // line up with canvas space
   Render.CompositeGlyphs(
     encoded.bits,
     op,
@@ -661,8 +666,8 @@ function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds)
     dstId,
     0,
     encoded.gsid,
-    items[0].x,
-    items[0].y,
+    items[0].x - srcOrigin[0],
+    items[0].y - srcOrigin[1],
     encoded.elts
   );
   trimGlyphPages(app, policy, new Set(pages.values()));
@@ -683,7 +688,7 @@ const MAX_TRAPS_PER_REQUEST = 6000;
  * Positions are intentionally NOT rounded to whole pixels — fractional
  * advances and origins keep zoom animations smooth.
  */
-function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
+function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null, srcOrigin = [0, 0]) {
   // unrounded glyph origins + ink bounding box
   const placed = [];
   let minX = Infinity;
@@ -742,7 +747,7 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
     bx = x0;
     by = y0;
   }
-  compositeTraps(app, op, srcId, dstId, traps, bx, by);
+  compositeTraps(app, op, srcId, dstId, traps, bx, by, srcOrigin);
 }
 
 /**
@@ -753,8 +758,10 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
  *
  * When bx/by are omitted they are derived from the trapezoid bounds (the
  * trap coordinates are then treated as absolute device coordinates).
+ * `srcOrigin` is the destination point the source's (0, 0) is aligned with,
+ * as for `drawGlyphRuns`.
  */
-export function compositeTraps(app, op, srcId, dstId, traps, bx, by) {
+export function compositeTraps(app, op, srcId, dstId, traps, bx, by, srcOrigin = [0, 0]) {
   if (traps.length === 0) return;
   const Render = app.display.Render;
 
@@ -800,8 +807,22 @@ export function compositeTraps(app, op, srcId, dstId, traps, bx, by) {
   for (let i = 0; i < traps.length; i += MAX_TRAPS_PER_REQUEST * 6) {
     Render.AddTraps(mask.picture.id, 0, 0, traps.slice(i, i + MAX_TRAPS_PER_REQUEST * 6));
   }
-  // src coords = dst coords (see drawBitmapGlyphRuns) so gradients line up
-  Render.Composite(op, srcId, mask.picture.id, dstId, bx, by, 0, 0, bx, by, bw, bh);
+  // src coords = dst coords from the source's origin (see
+  // drawBitmapGlyphRuns) so gradients line up
+  Render.Composite(
+    op,
+    srcId,
+    mask.picture.id,
+    dstId,
+    bx - srcOrigin[0],
+    by - srcOrigin[1],
+    0,
+    0,
+    bx,
+    by,
+    bw,
+    bh
+  );
   releaseScratchMask(app);
 }
 

package/package.json

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