ntk 8.13.0 → 8.14.0

package/lib/fontconfig.js

@@ -294,6 +294,11 @@ function cacheMatches(fc, out) {
 // child whose answer only reaches the event loop.
 const inflight = new Map();
 
+// fc -> the prewarm entry of a `best` job: the one face fontconfig picks for a
+// pattern, asked for beside its chain so a layout can take it first
+// (`bestOfPrewarm`)
+const bestInflight = new Map();
+
 /**
  * fc-match for a pattern, off the event loop — one child per pattern however
  * many callers ask at once, so a prewarm and an awaiting `matchSorted` share
@@ -326,11 +331,31 @@ function runFcMatch(fc) {
   return entry.promise;
 }
 
-// What a prewarm's child runs: fc-match with its answer in a file, then —
-// once that file is complete — the exit status in another, which is what a
-// synchronous caller waits for (`answerSync`). Nothing but shell builtins
-// runs after fc-match, so a PATH that holds fc-match alone is enough.
-const PREWARM_SCRIPT = 'fc-match "$@" > "$0.out" 2> "$0.err"; echo $? > "$0.done"';
+// What a prewarm's child runs: an fc-match for each job, side by side, each
+// with its answer in a file and then — once that file is complete — its exit
+// status in another, which is what a synchronous caller waits for
+// (`answerSync`). The arguments are fc-match's own (`fcMatchArgs`, the sort
+// flag first), then a file base, a kind and a pattern for each job: `sorted`
+// asks for the whole fallback chain, `best` for the one face fontconfig
+// would pick, which it answers in half the time, since it sorts nothing and
+// writes one line (`bestOfPrewarm`). The shell exits once every job has.
+// Nothing but shell builtins runs besides fc-match, so a PATH that holds
+// fc-match alone is enough.
+const PREWARM_SCRIPT = [
+  ...fcMatchArgs.map((_, i) => `a${i}=\${${i + 1}}`),
+  `shift ${fcMatchArgs.length}`,
+  'while [ $# -gt 2 ]; do ' +
+    'if [ "$2" = best ]; then ' +
+    `(fc-match ${fcMatchArgs
+      .slice(1)
+      .map((_, i) => `"$a${i + 1}"`)
+      .join(' ')} "$3" > "$1.out" 2> "$1.err"; echo $? > "$1.done") & ` +
+    'else ' +
+    `(fc-match ${fcMatchArgs.map((_, i) => `"$a${i}"`).join(' ')} "$3" > "$1.out" 2> "$1.err"; ` +
+    'echo $? > "$1.done") & ' +
+    'fi; shift 3; done',
+  'wait'
+].join('; ');
 
 // The directory prewarms write into, made on first use: undefined until
 // then, null where it cannot be (no shell, no writable tmpdir), which leaves
@@ -364,9 +389,9 @@ function prewarmBase() {
   return prewarmDir === null ? null : path.join(prewarmDir, String(prewarmCount++));
 }
 
-/** The status and answer a prewarm left, once it has left them; null while
- *  it is still running. */
-function readPrewarm(base) {
+/** The exit status a prewarm left, once it has left it; null while it is
+ *  still running. */
+function prewarmStatus(base) {
   const fs = builtin('node:fs');
   let done;
   try {
@@ -377,7 +402,15 @@ function readPrewarm(base) {
   // `echo` writes the status and the newline in one go, but a read can land
   // between the file appearing and its bytes arriving
   if (!done.endsWith('\n')) return null;
-  const status = Number(done);
+  return Number(done);
+}
+
+/** The status and answer a prewarm left, once it has left them; null while
+ *  it is still running. */
+function readPrewarm(base) {
+  const fs = builtin('node:fs');
+  const status = prewarmStatus(base);
+  if (status === null) return null;
   let out = '';
   if (status === 0) {
     try {
@@ -408,38 +441,56 @@ function removePrewarm(base) {
  * that, so the layout it was started for spawned fc-match a second time and
  * waited for that one instead.
  *
- * Null where files cannot be used; the caller prewarms the old way.
+ * One child for all the patterns handed over, because what a spawn costs is
+ * node's: libuv forks the whole process to start one, and a fork copies page
+ * tables that grow with the heap. Four spawns took 4.7 ms of the main thread
+ * at 130 MB and 33 ms at 260 MB on a Linux desktop; one shell starting the
+ * same four took 1.4 and 8, since the shell's own forks cost next to nothing.
+ *
+ * The answers stay in their files until something asks for one
+ * (`answerSync`), so a face no text is set in — a family's italics, as often
+ * as not — is never read. Read and parsed as each child exited, a family's
+ * answers were 9 ms of the main thread while the connection was still being
+ * set up: 634 KB apiece, most of it the coverage of every face fontconfig
+ * sorts behind the first.
+ *
+ * An entry a pattern, in order; null where files cannot be used, and the
+ * caller prewarms the old way.
  */
-function spawnToFiles(fc) {
+function spawnToFiles(fcs, bests = []) {
   const cp = childProcess();
-  const base = cp ? prewarmBase() : null;
-  if (base === null) return null;
+  const all = [...fcs, ...bests];
+  const bases = cp ? all.map(() => prewarmBase()) : [];
+  if (bases.length === 0 || bases[0] === null) return null;
+  const jobs = [];
+  all.forEach((fc, i) => jobs.push(bases[i], i < fcs.length ? 'sorted' : 'best', fc));
   let child;
   try {
-    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, base, ...fcMatchArgs, fc], {
+    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, 'ntk-fc-match', ...fcMatchArgs, ...jobs], {
       stdio: 'ignore'
     });
   } catch {
     return null;
   }
-  const entry = { promise: null, base, answer: undefined };
-  entry.promise = new Promise((resolve, reject) => {
-    const settle = () => {
-      if (inflight.get(fc) === entry) inflight.delete(fc);
-      // answered already, by a synchronous caller that could not wait
-      if (entry.answer === undefined) {
-        const left = readPrewarm(base);
-        removePrewarm(base);
-        entry.answer = left && left.status === 0 ? left.out : null;
-      }
-      if (entry.answer !== null) resolve(entry.answer);
-      else reject(new Error(`fc-match for "${fc}" did not answer`));
-    };
-    child.once('error', settle);
-    child.once('exit', settle);
+  // `promise` resolves once the child is gone, with what it left in the
+  // files; `exited` tells a synchronous caller there is nothing to wait for
+  const entries = all.map((fc, i) => {
+    const entry = { promise: null, base: bases[i], answer: undefined, exited: false, gone: null };
+    entry.promise = new Promise((resolve) => {
+      entry.gone = resolve;
+    });
+    (i < fcs.length ? inflight : bestInflight).set(fc, entry);
+    return entry;
   });
-  inflight.set(fc, entry);
-  return entry;
+  const gone = () => {
+    for (const entry of entries) {
+      entry.exited = true;
+      entry.gone();
+    }
+  };
+  child.once('error', gone);
+  child.once('exit', gone);
+  return entries;
 }
 
 // the synchronous path's nap while a prewarm finishes
@@ -451,14 +502,15 @@ const nap = new Int32Array(new SharedArrayBuffer(4));
 const PREWARM_WAIT_MS = 3000;
 
 /**
- * An in-flight prewarm's answer, waited for synchronously: its stdout, or
- * null if it failed or took too long — the caller then spawns fc-match
- * itself, which is also what reports why.
+ * A prewarm's answer, read from its files — waited for synchronously while
+ * the child still runs: its stdout, or null if it failed or took too long.
+ * The caller then spawns fc-match itself, which is also what reports why.
  */
 function answerSync(fc, entry) {
   const deadline = performance.now() + PREWARM_WAIT_MS;
   let left = readPrewarm(entry.base);
-  while (left === null && performance.now() < deadline) {
+  // a child that is gone has left all it ever will
+  while (left === null && !entry.exited && performance.now() < deadline) {
     Atomics.wait(nap, 0, 0, 1);
     left = readPrewarm(entry.base);
   }
@@ -470,6 +522,105 @@ function answerSync(fc, entry) {
   return entry.answer;
 }
 
+/**
+ * The first candidate of a prewarm's answer that ntk can open, read from the
+ * head of its file — waited for synchronously while the child still runs.
+ * Null where the answer failed, took too long, or holds no such candidate;
+ * the caller then reads it whole (`matchSortedSync`), which also reports why.
+ *
+ * An answer is the whole fallback chain, each face with its coverage: 634 KB
+ * for `sans-serif` on a Linux desktop, 2-3 ms to read and parse, where a
+ * layout setting text in the face needs its first line. The rest waits in
+ * the file for the first character that falls back, which Latin text in a
+ * face that covers it never has.
+ */
+function firstOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let status = prewarmStatus(entry.base);
+  while (status === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    status = prewarmStatus(entry.base);
+  }
+  // not answered, or not yet: the whole read is what decides, and reports
+  if (status !== 0) return null;
+  entry.first = firstCandidate(`${entry.base}.out`);
+  return entry.first;
+}
+
+/**
+ * The face a prewarm's `best` job found for a pattern, if ntk can open it —
+ * waited for synchronously while the job still runs. Null where it failed,
+ * took too long or named a face ntk cannot open; the caller then takes the
+ * chain's head (`firstOfPrewarm`).
+ *
+ * A `best` job asks fontconfig for the face it would pick, which it answers
+ * in about half the time the whole chain takes (15 ms against 30 on a Linux
+ * desktop): no sort, one line. A layout that asks for a family warmed while
+ * its component rendered waits on the prewarm, and the chain was most of
+ * that wait.
+ */
+function bestOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let left = readPrewarm(entry.base);
+  while (left === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    left = readPrewarm(entry.base);
+  }
+  if (left === null) return null;
+  removePrewarm(entry.base);
+  const [best] = left.status === 0 ? parseMatches(left.out) : [];
+  entry.first = best ?? null;
+  return entry.first;
+}
+
+// how much of an answer's head a read takes at a time: a line is a face's
+// path, names and coverage, a few KB at most
+const HEAD_CHUNK = 16384;
+
+/** The first line of an fc-match answer naming a face ntk can open, parsed;
+ *  null if the file has none, or cannot be read. */
+function firstCandidate(file) {
+  const fs = builtin('node:fs');
+  let fd;
+  try {
+    fd = fs.openSync(file, 'r');
+  } catch {
+    return null;
+  }
+  const decoder = new TextDecoder();
+  try {
+    let pending = new Uint8Array(0);
+    const chunk = new Uint8Array(HEAD_CHUNK);
+    for (;;) {
+      const read = fs.readSync(fd, chunk, 0, HEAD_CHUNK, null);
+      let bytes = pending;
+      if (read > 0) {
+        bytes = new Uint8Array(pending.length + read);
+        bytes.set(pending);
+        bytes.set(chunk.subarray(0, read), pending.length);
+      }
+      let start = 0;
+      // a newline never falls inside a UTF-8 sequence, so whole lines decode
+      for (let nl = bytes.indexOf(10, start); nl !== -1; nl = bytes.indexOf(10, start)) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start, nl)));
+        if (candidate) return candidate;
+        start = nl + 1;
+      }
+      if (read <= 0) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start)));
+        return candidate ?? null;
+      }
+      pending = bytes.slice(start);
+    }
+  } catch {
+    return null;
+  } finally {
+    fs.closeSync(fd);
+  }
+}
+
 /**
  * Seed the match cache for a pattern ahead of time, off the event loop.
  *
@@ -491,22 +642,54 @@ function answerSync(fc, entry) {
  * `matchSorted` is the reporting variant: same spawn, same cache, but it
  * awaits an answer and so has somewhere to put a failure.
  *
- * @returns {Promise<void>} resolves once the cache is seeded or the attempt
- *   abandoned
+ * @returns {Promise<void>} resolves once the answer is ready for the first
+ *   layout that asks — in the cache, or in the prewarm's files — or the
+ *   attempt abandoned
  */
 export function prewarm(pattern = {}) {
-  const fc = patternFor(pattern);
-  if (sortedCache.has(fc) || unavailable) return Promise.resolve();
-  const pending = inflight.get(fc)?.promise ?? spawnToFiles(fc)?.promise ?? runFcMatch(fc);
-  return pending.then(
-    (out) => {
-      if (!sortedCache.has(fc)) {
-        const list = parseMatches(out);
-        if (list.length > 0) sortedCache.set(fc, list);
-      }
-    },
-    () => {}
-  );
+  return warm([patternFor(pattern)])[0];
+}
+
+/**
+ * `prewarm` for several patterns at once, started together in one child: the
+ * faces a caller knows text will be set in besides a family's four — a menu's
+ * medium. Patterns already cached or running are not asked again.
+ *
+ * @returns {Promise<void>} once every pattern's answer is ready or given
+ *   up on; never rejects
+ */
+export function prewarmPatterns(patterns) {
+  return Promise.all(warm(patterns.map(patternFor))).then(() => {});
+}
+
+/**
+ * `prewarm` for a list of fontconfig patterns: the ones neither cached nor
+ * already running start together, in one child (`spawnToFiles`). A promise a
+ * pattern, resolving once its answer is ready or given up on; none rejects.
+ */
+function warm(fcs, best = null) {
+  if (unavailable) return fcs.map(() => Promise.resolve());
+  const fresh = [...new Set(fcs)].filter((fc) => !sortedCache.has(fc) && !inflight.has(fc));
+  // the best face only beside its own chain: once that is running or read,
+  // the chain's head answers as soon as a best job would
+  const bests = best !== null && fresh.includes(best) && !bestInflight.has(best) ? [best] : [];
+  if (fresh.length > 0) spawnToFiles(fresh, bests);
+  return fcs.map((fc) => {
+    if (sortedCache.has(fc)) return Promise.resolve();
+    // a prewarm's answer waits in its files for the first ask
+    const running = inflight.get(fc);
+    if (running?.base) return running.promise;
+    const pending = running?.promise ?? runFcMatch(fc);
+    return pending.then(
+      (out) => {
+        if (!sortedCache.has(fc)) {
+          const list = parseMatches(out);
+          if (list.length > 0) sortedCache.set(fc, list);
+        }
+      },
+      () => {}
+    );
+  });
 }
 
 // the faces a family is asked for in: regular, bold, and both in italic
@@ -524,14 +707,20 @@ const facesWarmed = new Set();
  * A document asks for its family's faces one at a time, as layout reaches
  * the first bold word, the first emphasis, and each ask that misses is a
  * synchronous fc-match on the way to the first frame: a Markdown document
- * waited on five of them, 600 ms on XQuartz. Started together they run side
- * by side, and each later ask finds its answer there.
+ * waited on five of them, 600 ms on XQuartz. Started together, from one
+ * child, they run side by side, and each later ask finds its answer there.
  */
 export function prewarmFaces(pattern = {}) {
   const family = pattern.family || 'sans-serif';
   if (facesWarmed.has(family) || unavailable) return;
   facesWarmed.add(family);
-  for (const [weight, style] of FACES) prewarm({ family, weight, style });
+  // the face a layout will ask for first gets a `best` job beside the chains:
+  // the one being asked for, or, warmed ahead, the regular
+  const first = patternFor(pattern.weight === undefined && pattern.style === undefined ? { family, weight: 400, style: 'normal' } : pattern);
+  warm(
+    FACES.map(([weight, style]) => patternFor({ family, weight, style })),
+    first
+  );
 }
 
 /**
@@ -561,9 +750,10 @@ export async function matchSorted(pattern = {}) {
   let out;
   const pending = inflight.get(fc);
   if (pending?.base) {
-    // a prewarm running for the pattern: its answer, or — if it has none —
-    // a spawn of our own, which is what reports why
-    out = await pending.promise.catch(() => undefined);
+    // a prewarm for the pattern: its answer once the child is gone, or — if
+    // it left none — a spawn of our own, which is what reports why
+    await pending.promise;
+    out = answerSync(fc, pending) ?? undefined;
   }
   if (out === undefined) {
     try {
@@ -617,6 +807,34 @@ export function matchSortedSync(pattern) {
   return cacheMatches(fc, out);
 }
 
+/**
+ * The best face for a pattern: `matchSortedSync(pattern)[0]`, without reading
+ * the rest of the fallback chain where a prewarm's answer is waiting in its
+ * file (`firstOfPrewarm`). A layout setting text in a face asks for this;
+ * the first character it has to fall back for reads the chain whole.
+ *
+ * @returns {{path, postscriptName, family: string, families: string[],
+ *   charset: string}}
+ */
+export function matchFirstSync(pattern) {
+  const fc = patternFor(pattern);
+  const cached = sortedCache.get(fc);
+  if (cached) return cached[0];
+  if (unavailable) throw noFontsError(unavailable);
+  prewarmFaces(pattern);
+  const best = bestInflight.get(fc);
+  if (best) {
+    const first = bestOfPrewarm(best);
+    if (first) return first;
+  }
+  const pending = inflight.get(fc);
+  if (pending?.base) {
+    const first = firstOfPrewarm(pending);
+    if (first) return first;
+  }
+  return matchSortedSync(pattern)[0];
+}
+
 /**
  * Resolve a font pattern ({family, weight, style}) to the best matching font
  * file. Returns { path, postscriptName, family, families } or throws if

package/lib/renderingcontext_2d.js

@@ -29,6 +29,13 @@ import { formatForDepth } from "./pictformat.js";
 import Pixmap from "./pixmap.js";
 import { REGION_DOCS, regionId } from "./region.js";
 import { routeRaster } from "./rasterize.js";
+import {
+  clipRingToRect,
+  clipTrianglesToRect,
+  rectsOnSurface,
+  WIRE_REACH,
+  withinRect,
+} from "./cliprect.js";
 import {
   blurCoverage,
   cachedShadow,
@@ -1029,6 +1036,13 @@ class RenderingContext2d {
   }
 
   _stylePicture(value) {
+    if (typeof value === "string") {
+      // by the string, where the app keeps that index (App#solidPictureOf);
+      // an app that only answers solidPicture — a host's own, a test's
+      // stand-in — takes the long way below
+      const app = this.window.app;
+      if (app.solidPictureOf) return app.solidPictureOf(value);
+    }
     if (typeof value === "string" || Array.isArray(value)) {
       const c = parseColor(value);
       return this.createSolidPicture(c[0], c[1], c[2], c[3]);
@@ -1868,9 +1882,37 @@ class RenderingContext2d {
     });
   }
 
-  _rasterizePolys(picture, shapes, rule, dx = 0, dy = 0) {
+  _rasterizePolys(
+    picture,
+    shapes,
+    rule,
+    dx = 0,
+    dy = 0,
+    w = this.width,
+    h = this.height,
+  ) {
     if (!shapes.length) return;
-    const traps = trapezoidize(shapes, dx, dy, [], rule);
+    // Trapezoids are 16.16 fixed point, and a coordinate past 32,767 throws
+    // out of the paint (lib/cliprect.js). A shape that reaches that far is
+    // cut to the picture first, a pixel to spare on every side: nothing
+    // outside the picture is ever composited. One that does not goes as it
+    // came, for the server to clip.
+    const x0 = -dx - 1;
+    const y0 = -dy - 1;
+    const x1 = w - dx + 1;
+    const y1 = h - dy + 1;
+    let fitted = null;
+    for (let i = 0; i < shapes.length; i++) {
+      const shape = shapes[i];
+      if (withinRect(shape, -WIRE_REACH - dx, -WIRE_REACH - dy, WIRE_REACH - dx, WIRE_REACH - dy)) {
+        if (fitted) fitted.push(shape);
+        continue;
+      }
+      if (!fitted) fitted = shapes.slice(0, i);
+      const ring = clipRingToRect(shape, x0, y0, x1, y1);
+      if (ring.length >= 6) fitted.push(ring);
+    }
+    const traps = trapezoidize(fitted ?? shapes, dx, dy, [], rule);
     // stay under the server's maximum request size
     const chunk = 4000 * 6;
     for (let i = 0; i < traps.length; i += chunk) {
@@ -2465,21 +2507,49 @@ class RenderingContext2d {
     // cuts above are meant to keep the extruder off that path; this keeps
     // a future miss from being catastrophic. A sum is finite iff every
     // term is.
+    //
+    // A triangle wholly off the surface is left out as well: it adds
+    // nothing on either route — the rasterizer would walk its rows only for
+    // its edges to cancel on the border column, and the server would be
+    // sent it only to clip it away — and a zoomed graph has hundreds of
+    // edges past the window every frame.
+    const right = this.width + 1;
+    const bottom = this.height + 1;
     let w = 0;
     for (let i = 0; i < tris.length; i += 6) {
-      const sum =
-        tris[i] +
-        tris[i + 1] +
-        tris[i + 2] +
-        tris[i + 3] +
-        tris[i + 4] +
-        tris[i + 5];
-      if (!Number.isFinite(sum)) continue;
+      const ax = tris[i];
+      const ay = tris[i + 1];
+      const bx = tris[i + 2];
+      const by = tris[i + 3];
+      const cx = tris[i + 4];
+      const cy = tris[i + 5];
+      if (!Number.isFinite(ax + ay + bx + by + cx + cy)) continue;
+      if (
+        (ax < -1 && bx < -1 && cx < -1) ||
+        (ay < -1 && by < -1 && cy < -1) ||
+        (ax > right && bx > right && cx > right) ||
+        (ay > bottom && by > bottom && cy > bottom)
+      ) {
+        continue;
+      }
       if (w < i) for (let k = 0; k < 6; k++) tris[w + k] = tris[i + k];
       w += 6;
     }
     if (w < tris.length) tris.length = w;
     if (!tris.length) return;
+    // Triangles are 16.16 fixed point, and the source origin a direct stroke
+    // hands the server is 16 bits: a stroke that reaches that far is cut to
+    // the surface first (lib/cliprect.js), a pixel to spare on every side, so
+    // what the surface shows is drawn exactly as before. One that does not
+    // goes as it came, for the server to clip.
+    const edgeX = this.width + 1;
+    const edgeY = this.height + 1;
+    if (!withinRect(tris, -WIRE_REACH, -WIRE_REACH, WIRE_REACH, WIRE_REACH)) {
+      const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
+      tris.length = 0;
+      for (let i = 0; i < cut.length; i++) tris.push(cut[i]);
+      if (!tris.length) return;
+    }
 
     const op = this._op();
     // round-cap/join disks overlap the stroke body; overlapping coverage
@@ -3018,6 +3088,20 @@ class RenderingContext2d {
    * for the whole list and then draws the rectangles through here */
   _fillRect(x, y, w, h) {
     if (matIsIdentity(this._m)) {
+      // X coordinates and sizes are 16 bits, and a coordinate past 32,767
+      // throws out of the paint (lib/cliprect.js): a rectangle that reaches
+      // past the surface is filled as the part of it the surface has.
+      if (x < 0 || y < 0 || x + w > this.width || y + h > this.height) {
+        const x0 = Math.max(x, 0);
+        const y0 = Math.max(y, 0);
+        const x1 = Math.min(x + w, this.width);
+        const y1 = Math.min(y + h, this.height);
+        if (!(x1 > x0 && y1 > y0)) return;
+        x = x0;
+        y = y0;
+        w = x1 - x0;
+        h = y1 - y0;
+      }
       if (!prepareStyle(this._backgroundPicture, this._m)) return;
       const op = this._op();
       // A rectangular clip is a smaller rectangle to fill, not a mask — this
@@ -3113,6 +3197,10 @@ class RenderingContext2d {
     }
     if (this._hasPolyClip) return;
     if (clip && (clip.w === 0 || clip.h === 0)) return; // clipped away
+    // the part of each the surface has, as `_fillRect` fills it: the wire's
+    // coordinates are 16 bits
+    const onSurface = rectsOnSurface(flat, this.width, this.height);
+    if (!onSurface.length) return;
     const R = this.Render;
     if (clip) this._setPictureClip(clip);
     // globalAlpha folds into the premultiplied colour — scaling all four
@@ -3122,12 +3210,14 @@ class RenderingContext2d {
     const color = this._foldedColor(this._fillStyle);
     // stay under the server's maximum request size
     const chunk = 10000 * 4;
-    for (let i = 0; i < flat.length; i += chunk) {
+    for (let i = 0; i < onSurface.length; i += chunk) {
       R.FillRectangles(
         this._op(),
         this._dst(),
         color,
-        i === 0 && flat.length <= chunk ? flat : flat.slice(i, i + chunk),
+        i === 0 && onSurface.length <= chunk
+          ? onSurface
+          : onSurface.slice(i, i + chunk),
       );
     }
     if (clip) this._invalidatePictureClip();
@@ -3166,10 +3256,13 @@ class RenderingContext2d {
     let x1 = -Infinity;
     let y1 = -Infinity;
     for (let i = 0; i < flat.length; i += 4) {
-      const x = Math.trunc(flat[i]);
-      const y = Math.trunc(flat[i + 1]);
-      const w = Math.trunc(flat[i + 2]);
-      const h = Math.trunc(flat[i + 3]);
+      // the part of it on the surface: the wire's coordinates are 16 bits
+      const left = Math.trunc(flat[i]);
+      const top = Math.trunc(flat[i + 1]);
+      const x = Math.max(0, left);
+      const y = Math.max(0, top);
+      const w = Math.min(this.width, left + Math.trunc(flat[i + 2])) - x;
+      const h = Math.min(this.height, top + Math.trunc(flat[i + 3])) - y;
       if (w <= 0 || h <= 0) continue;
       rects.push(x, y, w, h);
       if (x < x0) x0 = x;
@@ -3953,6 +4046,8 @@ class RenderingContext2d {
         entry.rule,
         -bb.x,
         -bb.y,
+        bb.w,
+        bb.h,
       );
     }
     R.Composite(