ntk 5.0.0 → 5.1.0

package/lib/app.js

@@ -2,6 +2,7 @@ import Clipboard from './clipboard.js';
 import { CursorCache } from './cursor.js';
 import { chooseGLXConfig } from './glx.js';
 import Pixmap from './pixmap.js';
+import { DEFAULT_RASTER_POLICY, defaultRasterizer } from './rasterize.js';
 import FontManager from './text/fontmanager.js';
 import Window from './window.js';
 
@@ -13,8 +14,9 @@ export default class App {
   /**
    * @param {object} display node-x11 display
    * @param {object} [options] environment hooks: { fontSource (see
-   *   text/fontsource.js), glxVisual (visual id for getContext('opengl')
-   *   instead of querying the server for one) }
+   *   text/fontsource.js), rasterizer and rasterPolicy (see rasterize.js),
+   *   glxVisual (visual id for getContext('opengl') instead of querying the
+   *   server for one) }
    */
   constructor(display, options = {}) {
     // ntk decodes property payloads and atom lists with little-endian
@@ -38,6 +40,7 @@ export default class App {
     this._fonts = null;
     this._clipboard = null;
     this._cursors = null;
+    this._rasterizer = undefined;
     // node-x11 emits X errors it cannot route to a request callback as
     // 'error' on the client — from inside its packet parser. With no
     // listener that emit throws and the parser never re-arms, silently
@@ -56,6 +59,31 @@ export default class App {
     return this._fonts;
   }
 
+  /**
+   * The Rasterizer small fills and strokes go through instead of the server's
+   * trapezoid path (see lib/rasterize.js and docs/context-2d.md). Defaults to
+   * the process-wide default; `createClient({ rasterizer: null })` sends every
+   * drawing to the server.
+   */
+  get rasterizer() {
+    if (this._rasterizer === undefined) {
+      this._rasterizer =
+        'rasterizer' in this.options ? this.options.rasterizer : defaultRasterizer();
+    }
+    return this._rasterizer;
+  }
+
+  set rasterizer(value) {
+    this._rasterizer = value;
+  }
+
+  /** thresholds for that decision, merged over DEFAULT_RASTER_POLICY */
+  get rasterPolicy() {
+    return this.options.rasterPolicy
+      ? { ...DEFAULT_RASTER_POLICY, ...this.options.rasterPolicy }
+      : DEFAULT_RASTER_POLICY;
+  }
+
   /** selection/clipboard transfer: write()/read() text (docs/clipboard.md) */
   get clipboard() {
     if (!this._clipboard) this._clipboard = new Clipboard(this);

package/lib/index.js

@@ -18,6 +18,13 @@ import {
   defaultFontSource,
   setDefaultFontSource
 } from './text/fontsource.js';
+import {
+  CoverageAccumulator,
+  DEFAULT_RASTER_POLICY,
+  ScanlineRasterizer,
+  defaultRasterizer,
+  setDefaultRasterizer
+} from './rasterize.js';
 import { TextLayout } from './text/layout.js';
 import HtmlView from './widgets/htmlview.js';
 import SvgView from './widgets/svgview.js';
@@ -54,6 +61,8 @@ const DEFAULT_BUFFER_REQUESTS = { maxSize: 64 * 1024 };
  * @param {object} [options] passed through to x11.createClient
  *   (e.g. { display: ':1' }); ntk additionally understands
  *   { fontSource } — a pluggable system-font lookup (see docs/fonts.md) —
+ *   { rasterizer, rasterPolicy } — where small fills and strokes are
+ *   rasterized, and the thresholds for that choice (see docs/context-2d.md) —
  *   { glxVisual } — a visual id for getContext('opengl') to use instead of
  *   querying the server for one — and
  *   { onXError } — called with X protocol errors no request callback
@@ -151,6 +160,11 @@ export {
   StaticFontSource,
   defaultFontSource,
   setDefaultFontSource,
+  CoverageAccumulator,
+  ScanlineRasterizer,
+  defaultRasterizer,
+  setDefaultRasterizer,
+  DEFAULT_RASTER_POLICY,
   TextLayout,
   HtmlView,
   SvgView,

package/lib/rasterize.js

@@ -1,23 +1,254 @@
-// Minimal pure-JS scanline rasterizer for glyph outlines.
+// Pure-JS coverage rasterization: outlines and polygons in, 8-bit alpha out.
 //
-// Takes path commands in y-down pixel coordinates with the origin at the
-// glyph baseline (produced by Font.rasterize from fontkit outlines) and
-// produces an antialiased 8-bit alpha bitmap suitable for XRender
-// AddGlyphs. Non-zero winding rule, 4x4 supersampling.
+// Two consumers, one algorithm:
+//
+//   rasterizePath()   glyph outlines -> a8 bitmap for XRender AddGlyphs
+//   rasterizePolys()  device-space path/stroke geometry -> a8 coverage mask,
+//                     uploaded by the 2d context instead of asking the server
+//                     to rasterize trapezoids (see routeRaster below)
+//
+// The algorithm is signed-area accumulation, the one font-rs and
+// stb_truetype v2 use. Each edge deposits the exact area it sweeps through
+// every pixel row it crosses into a float accumulator; a prefix sum along the
+// row turns those deltas into winding-weighted coverage. There is no
+// supersampling and no per-scanline crossing sort — coverage is analytic, so
+// the result is closer to a reference rasterizer than 4x4 supersampling was,
+// at a fraction of the cost (~25 microseconds for a 20px icon against ~600).
+
+/**
+ * Antialiased coverage accumulator over a width x height pixel grid.
+ *
+ * Geometry is in y-down device space with the grid's top-left at (0, 0);
+ * callers translate into that space through the `dx`/`dy` arguments. Add as
+ * many polygons as the drawing needs, then read the result with `toAlpha`.
+ */
+export class CoverageAccumulator {
+  /**
+   * @param {number} width
+   * @param {number} height
+   */
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    // one column of slack: an edge that ends exactly on the right border
+    // deposits its last fraction one cell past the last pixel
+    this.stride = width + 2;
+    this.acc = new Float32Array(this.stride * height);
+  }
+
+  /** forget accumulated coverage, keeping the buffer (reuse across draws) */
+  reset() {
+    this.acc.fill(0);
+    return this;
+  }
+
+  /**
+   * Accumulate one directed edge. Horizontal edges contribute nothing and
+   * are skipped; everything else deposits `dy * direction` of signed area,
+   * split across the pixels the edge passes through.
+   */
+  edge(ax, ay, bx, by) {
+    if (ay === by) return;
+    let dir = 1;
+    let x0 = ax;
+    let y0 = ay;
+    let x1 = bx;
+    let y1 = by;
+    if (ay > by) {
+      dir = -1;
+      x0 = bx;
+      y0 = by;
+      x1 = ax;
+      y1 = ay;
+    }
+    const { width, stride, acc, height } = this;
+    const dxdy = (x1 - x0) / (y1 - y0);
+    let x = x0;
+    if (y0 < 0) {
+      // enter the grid at row 0 rather than accumulating rows nobody reads
+      x -= y0 * dxdy;
+      y0 = 0;
+    }
+    const rowEnd = Math.min(height, Math.ceil(y1));
+    for (let y = y0 | 0; y < rowEnd; ++y) {
+      const line = y * stride;
+      const dy = Math.min(y + 1, y1) - Math.max(y, y0);
+      const xnext = x + dxdy * dy;
+      const d = dy * dir;
+      // the row's x span, clamped into the grid — geometry outside the
+      // bitmap piles its coverage onto the border column, which is what a
+      // clipped fill should look like
+      let xa = x < xnext ? x : xnext;
+      let xb = x < xnext ? xnext : x;
+      if (xa < 0) xa = 0;
+      else if (xa > width) xa = width;
+      if (xb < 0) xb = 0;
+      else if (xb > width) xb = width;
+
+      const xaFloor = Math.floor(xa);
+      const x0i = xaFloor | 0;
+      const xbCeil = Math.ceil(xb);
+      const x1i = xbCeil | 0;
+      if (x1i <= x0i + 1) {
+        // the whole span sits inside one pixel: split by the midpoint
+        const xmf = 0.5 * (xa + xb) - xaFloor;
+        acc[line + x0i] += d - d * xmf;
+        acc[line + x0i + 1] += d * xmf;
+      } else {
+        // trapezoidal split across the pixels the span crosses
+        const s = 1 / (xb - xa);
+        const x0f = xa - xaFloor;
+        const a0 = 0.5 * s * (1 - x0f) * (1 - x0f);
+        const x1f = xb - xbCeil + 1;
+        const am = 0.5 * s * x1f * x1f;
+        acc[line + x0i] += d * a0;
+        if (x1i === x0i + 2) {
+          acc[line + x0i + 1] += d * (1 - a0 - am);
+        } else {
+          const a1 = s * (1.5 - x0f);
+          acc[line + x0i + 1] += d * (a1 - a0);
+          for (let xi = x0i + 2; xi < x1i - 1; ++xi) acc[line + xi] += d * s;
+          const a2 = a1 + (x1i - x0i - 3) * s;
+          acc[line + x1i - 1] += d * (1 - a2 - am);
+        }
+        acc[line + x1i] += d * am;
+      }
+      x = xnext;
+    }
+  }
+
+  /**
+   * Accumulate a closed polygon.
+   * @param {ArrayLike<number>} pts flat [x0,y0,x1,y1,…]; the closing edge is implied
+   * @param {number} [dx] translation applied to every x
+   * @param {number} [dy] translation applied to every y
+   */
+  polygon(pts, dx = 0, dy = 0) {
+    const n = pts.length;
+    if (n < 6) return this;
+    let px = pts[n - 2] + dx;
+    let py = pts[n - 1] + dy;
+    for (let i = 0; i < n; i += 2) {
+      const x = pts[i] + dx;
+      const y = pts[i + 1] + dy;
+      this.edge(px, py, x, y);
+      px = x;
+      py = y;
+    }
+    return this;
+  }
+
+  /**
+   * Accumulate a triangle soup as a *union*: every triangle is wound the same
+   * way before it is added, so overlapping triangles reinforce rather than
+   * cancel and the clamped non-zero result is their union. This is what a
+   * stroke needs — extruded segments, caps and joins overlap constantly, and
+   * accumulating them without normalization would punch holes at the seams.
+   *
+   * @param {ArrayLike<number>} tris flat x,y pairs, three points per triangle
+   */
+  triangles(tris, dx = 0, dy = 0) {
+    for (let i = 0; i + 5 < tris.length; i += 6) {
+      const ax = tris[i] + dx;
+      const ay = tris[i + 1] + dy;
+      let bx = tris[i + 2] + dx;
+      let by = tris[i + 3] + dy;
+      let cx = tris[i + 4] + dx;
+      let cy = tris[i + 5] + dy;
+      const area = (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
+      if (area === 0) continue;
+      if (area < 0) {
+        const tx = bx;
+        const ty = by;
+        bx = cx;
+        by = cy;
+        cx = tx;
+        cy = ty;
+      }
+      this.edge(ax, ay, bx, by);
+      this.edge(bx, by, cx, cy);
+      this.edge(cx, cy, ax, ay);
+    }
+    return this;
+  }
+
+  /**
+   * Integrate the accumulator into 8-bit coverage.
+   *
+   * @param {Uint8Array|Buffer} [out] destination, `stride * height` bytes
+   * @param {'nonzero'|'evenodd'} [rule] fill rule
+   * @param {number} [stride] destination row stride (defaults to width; the
+   *   X wire format wants rows padded to 4 bytes)
+   */
+  toAlpha(out, rule = 'nonzero', stride = this.width) {
+    const { width, height, acc } = this;
+    const dst = out ?? new Uint8Array(stride * height);
+    const evenodd = rule === 'evenodd';
+    for (let y = 0; y < height; ++y) {
+      let sum = 0;
+      const line = y * this.stride;
+      const orow = y * stride;
+      for (let x = 0; x < width; ++x) {
+        sum += acc[line + x];
+        let c = sum < 0 ? -sum : sum;
+        if (evenodd) {
+          // fold the winding number through a triangle wave: 0,1,2,3 ->
+          // 0,1,0,1 with the fractional parts still antialiased
+          c %= 2;
+          if (c > 1) c = 2 - c;
+        } else if (c > 1) {
+          c = 1;
+        }
+        dst[orow + x] = (c * 255 + 0.5) | 0;
+      }
+    }
+    return dst;
+  }
+}
 
-const DEFAULT_SS = 4; // supersampling factor per axis
+/**
+ * Rasterize closed polygons into an 8-bit coverage bitmap.
+ *
+ * @param {Array<ArrayLike<number>>} polys flat [x0,y0,…] polygons, device space
+ * @param {number} width
+ * @param {number} height
+ * @param {'nonzero'|'evenodd'} [rule]
+ * @param {object} [opts] { dx, dy, out, stride }
+ * @returns {Uint8Array|Buffer} `width * height` bytes (or `stride * height`)
+ */
+export function rasterizePolys(polys, width, height, rule = 'nonzero', opts = {}) {
+  const { dx = 0, dy = 0, out, stride = width } = opts;
+  const acc = new CoverageAccumulator(width, height);
+  for (const p of polys) acc.polygon(p, dx, dy);
+  return acc.toAlpha(out, rule, stride);
+}
+
+/**
+ * Rasterize a triangle soup into an 8-bit coverage bitmap, unioning overlaps
+ * (see CoverageAccumulator#triangles).
+ */
+export function rasterizeTriangles(tris, width, height, opts = {}) {
+  const { dx = 0, dy = 0, out, stride = width } = opts;
+  const acc = new CoverageAccumulator(width, height);
+  acc.triangles(tris, dx, dy);
+  return acc.toAlpha(out, 'nonzero', stride);
+}
 
 /**
+ * Glyph outlines -> a8 bitmap for XRender AddGlyphs.
+ *
  * @param {Array} commands path commands ({type: M|L|Q|C|Z, x, y, x1, y1, x2, y2})
- * @param {number} [ss] supersampling factor per axis (large glyphs pass 2 —
- *   AA quality is indistinguishable above ~96px and rasterization is 4x cheaper)
+ *   in y-down pixel coordinates with the origin at the glyph baseline
+ * @param {number} [_ss] ignored; kept so callers that used to ask for a
+ *   supersampling factor keep working. Coverage is analytic now, so there is
+ *   no quality/speed dial to turn.
  * @returns {{width, height, left, top, data: Buffer}|null}
  *   left/top are offsets of the bitmap's top-left corner relative to the
  *   glyph origin (left is typically small, top is typically negative —
- *   above the baseline). Returns null for empty outlines (e.g. space).
+ *   above the baseline). `width` is the row stride, padded to 4 bytes as the
+ *   AddGlyphs wire format requires. Returns null for empty outlines.
  */
-export function rasterizePath(commands, ss = DEFAULT_SS) {
-  const SS = ss;
+export function rasterizePath(commands, _ss) {
   const polys = flatten(commands);
   if (polys.length === 0) return null;
 
@@ -40,60 +271,9 @@ export function rasterizePath(commands, ss = DEFAULT_SS) {
   const height = Math.ceil(maxY) - top;
   if (width <= 0 || height <= 0) return null;
 
-  // pad rows to 4 bytes as required by the AddGlyphs wire format
   const stride = (width + 3) & ~3;
-  const coverage = new Uint16Array(stride * height);
-
-  // closed edges in supersampled bitmap space
-  const edges = [];
-  for (const poly of polys) {
-    const n = poly.length / 2;
-    for (let i = 0; i < n; ++i) {
-      const j = (i + 1) % n;
-      const x0 = (poly[i * 2] - left) * SS;
-      const y0 = (poly[i * 2 + 1] - top) * SS;
-      const x1 = (poly[j * 2] - left) * SS;
-      const y1 = (poly[j * 2 + 1] - top) * SS;
-      if (y0 !== y1) edges.push([x0, y0, x1, y1]);
-    }
-  }
-
-  const crossings = [];
-  for (let row = 0; row < height * SS; ++row) {
-    const y = row + 0.5;
-    crossings.length = 0;
-    for (const [x0, y0, x1, y1] of edges) {
-      if ((y0 <= y && y1 > y) || (y1 <= y && y0 > y)) {
-        const x = x0 + ((y - y0) * (x1 - x0)) / (y1 - y0);
-        crossings.push([x, y1 > y0 ? 1 : -1]);
-      }
-    }
-    crossings.sort((a, b) => a[0] - b[0]);
-
-    let winding = 0;
-    let spanStart = 0;
-    const py = (row / SS) | 0;
-    for (const [x, dir] of crossings) {
-      if (winding === 0) spanStart = x;
-      winding += dir;
-      if (winding === 0) {
-        // fill supersample cells whose centers are inside [spanStart, x)
-        const from = Math.max(0, Math.ceil(spanStart - 0.5));
-        const to = Math.min(width * SS - 1, Math.floor(x - 0.5));
-        for (let cell = from; cell <= to; ++cell) {
-          coverage[py * stride + ((cell / SS) | 0)]++;
-        }
-      }
-    }
-  }
-
   const data = Buffer.alloc(stride * height);
-  const full = SS * SS;
-  for (let i = 0; i < coverage.length; ++i) {
-    const c = coverage[i];
-    data[i] = c >= full ? 255 : ((c * 255) / full) | 0;
-  }
-
+  rasterizePolys(polys, width, height, 'nonzero', { dx: -left, dy: -top, out: data, stride });
   return { width: stride, height, left, top, data };
 }
 
@@ -176,3 +356,93 @@ function curveSteps(...coords) {
   const size = Math.max(maxX - minX, maxY - minY);
   return Math.min(24, Math.max(3, Math.ceil(size / 3)));
 }
+
+// ---------------------------------------------------------------------------
+// the pluggable seam
+//
+// A Rasterizer answers one question — "give me the coverage of this geometry
+// on a width x height grid" — and the 2d context uploads the answer as an a8
+// mask. Everything downstream (globalAlpha, clip, composite op, gradient and
+// solid sources) is unchanged, because what we hand the server is *coverage*,
+// not colour.
+//
+// Rasterizer interface (duck-typed):
+//
+//   rasterize(job) -> Uint8Array | Buffer | null
+//     `job` is { polys, triangles, width, height, rule, dx, dy }:
+//     - exactly one of `polys` (closed polygons, filled by `rule`) and
+//       `triangles` (a stroke's triangle soup, unioned regardless of rule)
+//     - `dx`/`dy` must be *added to every coordinate*. Geometry arrives in
+//       device space and the grid covers the drawing's bounding box, so the
+//       offset is what maps one to the other. It is passed rather than
+//       pre-applied because pre-applying means copying every point of every
+//       path on every frame, which is the cost this whole route exists to
+//       avoid.
+//     Return `width * height` bytes of 8-bit coverage, row-major and
+//     unpadded, or null to decline — declining routes the drawing back to
+//     the server's trapezoid path, so a partial implementation is safe.
+//     A rasterizer that only handles, say, non-zero fills can return null
+//     for everything else and stay correct.
+
+/** the in-repo rasterizer: CoverageAccumulator, no dependencies */
+export class ScanlineRasterizer {
+  rasterize({ polys, triangles, width, height, rule, dx = 0, dy = 0 }) {
+    const acc = new CoverageAccumulator(width, height);
+    if (triangles) acc.triangles(triangles, dx, dy);
+    else for (const p of polys) acc.polygon(p, dx, dy);
+    return acc.toAlpha(undefined, triangles ? 'nonzero' : rule);
+  }
+}
+
+let _defaultRasterizer = null;
+
+/** the process-wide default Rasterizer */
+export function defaultRasterizer() {
+  if (!_defaultRasterizer) _defaultRasterizer = new ScanlineRasterizer();
+  return _defaultRasterizer;
+}
+
+/**
+ * Replace the process-wide default Rasterizer. Affects every app created
+ * afterwards without an explicit one. Pass null to send every drawing to the
+ * server, which is the behaviour ntk had before local rasterization.
+ */
+export function setDefaultRasterizer(rasterizer) {
+  _defaultRasterizer = rasterizer;
+}
+
+/**
+ * When a drawing is cheaper to rasterize here and upload than to hand the
+ * server as trapezoids.
+ *
+ * Coverage upload costs one byte per pixel of the bounding box and grows with
+ * *area*; the trapezoid path costs per-request overhead plus 40 bytes per
+ * trapezoid and grows with *geometric complexity*. So the threshold is a
+ * ratio, not a size — measured against XQuartz with two shapes that bracket
+ * the range (a rounded rectangle at 14-79 trapezoids, a stroked icon at
+ * 181-1053), local rasterization wins whenever `area / edges` is under ~150
+ * and loses above ~220, consistently for both.
+ *
+ * - `maxArea` — at or below this bounding-box area, always local. No shape
+ *   measured lost here, so small drawings never pay for the check.
+ * - `bytesPerEdge` — above that, local while `area <= bytesPerEdge * edges`.
+ *   Edge count is free (we just flattened the path); trapezoid count would
+ *   be a better predictor but costs a trapezoidize to learn.
+ * - `maxBytes` — never upload more coverage than this in one go.
+ */
+export const DEFAULT_RASTER_POLICY = {
+  maxArea: 64 * 64,
+  bytesPerEdge: 150,
+  maxBytes: 1 << 20
+};
+
+/**
+ * @returns {'local'|'server'} where a drawing of this size and complexity
+ *   should be rasterized
+ */
+export function routeRaster(width, height, edges, policy = DEFAULT_RASTER_POLICY) {
+  const area = width * height;
+  if (area <= 0 || area > policy.maxBytes) return 'server';
+  if (area <= policy.maxArea) return 'local';
+  return area <= policy.bytesPerEdge * edges ? 'local' : 'server';
+}

package/lib/renderingcontext_2d.js

@@ -17,6 +17,7 @@ import {
 } from './path.js';
 import Picture from './picture.js';
 import Pixmap from './pixmap.js';
+import { routeRaster } from './rasterize.js';
 import { compositeTraps, drawGlyphRuns } from './text/glyphs.js';
 import { TextLayout } from './text/layout.js';
 import { reorderRuns } from './text/shape.js';
@@ -560,6 +561,54 @@ class RenderingContext2d {
     }
   }
 
+  // GC for uploading coverage into the scratch a8 mask
+  _maskGC() {
+    if (!this._fillMaskGC) {
+      this._fillMaskGC = this.X.AllocID();
+      this.X.CreateGC(this._fillMaskGC, this.fillMaskDrawable.id);
+    }
+    return this._fillMaskGC;
+  }
+
+  /**
+   * Rasterize `job` here and PutImage the coverage into the scratch mask at
+   * the drawing's bounding box, instead of asking the server to rasterize
+   * trapezoids. Returns false when the app has no rasterizer, when the policy
+   * routes this drawing to the server, or when the rasterizer declines — in
+   * every one of those cases the caller falls back to the trapezoid path.
+   *
+   * PutImage writes with Src semantics, so this replaces the mask clear as
+   * well as the AddTraps: two requests become one, and the one that is left
+   * touches only the bounding box.
+   */
+  _uploadCoverage(job, b, edges) {
+    const rasterizer = this.window.app.rasterizer;
+    if (!rasterizer) return false;
+    if (routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy) !== 'local') return false;
+
+    const coverage = rasterizer.rasterize({ ...job, width: b.w, height: b.h });
+    if (!coverage) return false;
+
+    // X wants scanlines padded to 4 bytes; the rasterizer contract is
+    // unpadded rows. When the width is already a multiple of 4 — which every
+    // power-of-two icon box is — the coverage goes out as a view over the
+    // rasterizer's own bytes, with no copy at all.
+    const stride = (b.w + 3) & ~3;
+    let data;
+    if (stride === b.w) {
+      data = Buffer.isBuffer(coverage)
+        ? coverage
+        : Buffer.from(coverage.buffer, coverage.byteOffset, coverage.length);
+    } else {
+      data = Buffer.alloc(stride * b.h);
+      for (let y = 0; y < b.h; ++y) {
+        Buffer.from(coverage.buffer, coverage.byteOffset + y * b.w, b.w).copy(data, y * stride);
+      }
+    }
+    this.X.PutImage(2, this.fillMaskDrawable.id, this._maskGC(), b.w, b.h, b.x, b.y, 0, 8, data);
+    return true;
+  }
+
   /**
    * Core fill: rasterize device-space polys into the scratch a8 mask,
    * scale by globalAlpha, intersect with the clip, composite the source.
@@ -584,6 +633,27 @@ class RenderingContext2d {
       }
     }
     if (maxX === -Infinity) return null;
+    return this._clampBBox(minX, minY, maxX, maxY);
+  }
+
+  /** the same, for a flat triangle soup (stroke geometry) */
+  _trisBBox(tris) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < tris.length; i += 2) {
+      if (tris[i] < minX) minX = tris[i];
+      if (tris[i] > maxX) maxX = tris[i];
+      if (tris[i + 1] < minY) minY = tris[i + 1];
+      if (tris[i + 1] > maxY) maxY = tris[i + 1];
+    }
+    if (maxX === -Infinity) return null;
+    return this._clampBBox(minX, minY, maxX, maxY);
+  }
+
+  // a pixel of slack for the antialiased edge, clamped to the surface
+  _clampBBox(minX, minY, maxX, maxY) {
     const x = Math.max(0, Math.floor(minX) - 1);
     const y = Math.max(0, Math.floor(minY) - 1);
     const w = Math.min(this.width, Math.ceil(maxX) + 1) - x;
@@ -610,8 +680,17 @@ class RenderingContext2d {
     const R = this.Render;
 
     this._ensureFillMask();
-    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
-    this._rasterizePolys(this.fillMask, polys, rule);
+    const flat = [];
+    let edges = 0;
+    for (const p of polys) {
+      if (p.pts.length < 6) continue;
+      flat.push(p.pts);
+      edges += p.pts.length / 2;
+    }
+    if (!this._uploadCoverage({ polys: flat, rule, dx: -b.x, dy: -b.y }, b, edges)) {
+      R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
+      this._rasterizePolys(this.fillMask, polys, rule);
+    }
 
     if (alpha < 1) {
       // In with a constant color scales the a8 coverage by that alpha
@@ -763,21 +842,33 @@ class RenderingContext2d {
       return;
     }
 
-    // render coverage into the scratch mask, then composite through it so
-    // the stroke honors clip / globalAlpha / composite op
+    // Render coverage into the scratch mask, then composite through it so
+    // the stroke honors clip / globalAlpha / composite op.
+    //
+    // Bounded to the stroke's bounding box, for the same reason _fillPolys
+    // is: on the wire a Composite is the same size either way, but this
+    // branch runs once per stroke, and a wall of 400 round-capped icons is
+    // 3200 of them. Clearing and compositing the whole surface each time was
+    // ~6 Gpx a frame and took 1.9 s on XQuartz where the bounded version
+    // takes 37 ms (react-x11#148). Stale mask content outside the box is
+    // never composited, so clearing only the box is safe.
     this._ensureFillMask();
-    this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
-    const opaque = this.createSolidPicture(0, 0, 0, 1);
-    for (let i = 0; i < tris.length; i += chunk) {
-      this.Render.Triangles(this.Render.PictOp.Add, opaque.id, 0, 0, this.fillMask.id, this.Render.a8, tris.slice(i, i + chunk));
+    const b = this._trisBBox(tris);
+    if (!b) return;
+    if (!this._uploadCoverage({ triangles: tris, dx: -b.x, dy: -b.y }, b, tris.length / 2)) {
+      this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
+      const opaque = this.createSolidPicture(0, 0, 0, 1);
+      for (let i = 0; i < tris.length; i += chunk) {
+        this.Render.Triangles(this.Render.PictOp.Add, opaque.id, 0, 0, this.fillMask.id, this.Render.a8, tris.slice(i, i + chunk));
+      }
     }
     if (this.globalAlpha < 1) {
-      this.Render.FillRectangles(this.Render.PictOp.In, this.fillMask.id, [0, 0, 0, this.globalAlpha], [0, 0, this.width, this.height]);
+      this.Render.FillRectangles(this.Render.PictOp.In, this.fillMask.id, [0, 0, 0, this.globalAlpha], [b.x, b.y, b.w, b.h]);
     }
     if (this.clipMask) {
-      this.Render.Composite(this.Render.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+      this.Render.Composite(this.Render.PictOp.In, this.clipMask.id, 0, this.fillMask.id, b.x, b.y, 0, 0, b.x, b.y, b.w, b.h);
     }
-    this.Render.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this.Render.Composite(op, src.id, this.fillMask.id, this.picture.id, b.x, b.y, b.x, b.y, b.x, b.y, b.w, b.h);
     this._markDirty();
   }
 

package/lib/text/font.js

@@ -143,11 +143,10 @@ export default class Font {
   /**
    * Rasterize a glyph to an 8-bit alpha bitmap (or null for blank glyphs).
    * Converts fontkit's y-up font-unit path to the y-down pixel commands the
-   * scanline rasterizer expects. Above 96px supersampling drops from 4x4 to
-   * 2x2 — visually indistinguishable at that size, 4x cheaper to rasterize.
+   * scanline rasterizer expects.
    */
   rasterize(glyphId, size) {
-    return rasterizePath(this._pathCommands(glyphId, size), size > 96 ? 2 : 4);
+    return rasterizePath(this._pathCommands(glyphId, size));
   }
 
   /**

package/package.json

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