actualBoundingBoxLeft has the sign inverted relative to canvas's own rasteriser (3.2.0, 3.2.3)

Aperta
  • Qualcosa non va?
#2,620 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

@florianaltendorfer ci sta già lavorando.

Dal 24/10/2026.

  • #2631 di @florianaltendorfer — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, node.js
Ambito
computer-graphics

Direzione di ricerca

Inizia eseguendo la riproduzione standalone di Node.js e confronta measureText().actualBoundingBoxLeft con il raster dipinto per i glifi elencati. Segui l'implementazione delle metriche del testo utilizzata da measureText(), quindi verifica che il valore sinistro riportato segua la specifica HTML e concordi con il risultato del raster, mentre actualBoundingBoxRight rimane invariato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Bug

Summary

TextMetrics.actualBoundingBoxLeft comes back with the sign inverted relative to the library's own rasteriser. The magnitude is right, actualBoundingBoxRight is right, only the sign of left is wrong. Reproduced on canvas 3.2.0 and 3.2.3 (macOS arm64, Node 22).

Per the HTML spec, actualBoundingBoxLeft is the distance from the alignment point to the left side of the ink box, positive to the left (https://html.spec.whatwg.org/multipage/canvas.html#dom-textmetrics-actualboundingboxleft). So a glyph whose ink overhangs LEFT of the pen (a j with its hooked descender) should report a positive value, and a glyph whose ink starts RIGHT of the pen should report a negative one. @napi-rs/canvas and Chrome both do that. canvas does the opposite.

Minimal repro (standalone)

Paints the text, scans the raster for the leftmost ink pixel relative to the pen, and compares that against measureText().actualBoundingBoxLeft on the same canvas. Optionally set FONT_FILE to a TTF to register a known face; the default font works too as long as its j overhangs left.

// node repro.cjs
const { createCanvas, registerFont } = require('canvas');
const path = require('path');

const FONT_FILE = process.env.FONT_FILE; // optional
if (FONT_FILE) registerFont(path.resolve(FONT_FILE), { family: 'ReproFace' });
const FONT = `96px ${FONT_FILE ? 'ReproFace' : 'sans-serif'}`;
const SIZE = 400, PEN = 200;

function paintedLeft(text) {
  const ctx = createCanvas(SIZE, SIZE).getContext('2d');
  ctx.fillStyle = '#000'; ctx.fillRect(0, 0, SIZE, SIZE);
  ctx.font = FONT; ctx.textBaseline = 'alphabetic'; ctx.textAlign = 'left';
  ctx.fillStyle = '#fff'; ctx.fillText(text, PEN, 250);
  const d = ctx.getImageData(0, 0, SIZE, SIZE).data;
  let minX = Infinity;
  for (let y = 0; y < SIZE; y++) for (let x = 0; x < SIZE; x++)
    if (d[(y * SIZE + x) * 4] > 128 && x < minX) minX = x;
  return PEN - minX; // positive = ink starts LEFT of the pen
}
function measuredLeft(text) {
  const ctx = createCanvas(10, 10).getContext('2d');
  ctx.font = FONT; ctx.textBaseline = 'alphabetic'; ctx.textAlign = 'left';
  return ctx.measureText(text).actualBoundingBoxLeft;
}
for (const t of ['j', 'HAMBURGEFONS', 'W']) {
  console.log(t.padEnd(14), 'painted left:', paintedLeft(t), ' measured actualBoundingBoxLeft:', measuredLeft(t));
}

Numbers (Inter Black, 96px, pen x=200)

text painted left (scanned off canvas's own raster) canvas actualBoundingBoxLeft @napi-rs/canvas actualBoundingBoxLeft
j +3 −3.281 +4.000
HAMBURGEFONS −5 +4.500 −4.000
bhpqfj −5 +4.781 −4.000
W −2 +2.156 −2.000

actualBoundingBoxRight agrees with @napi-rs/canvas to under 1px on every row, so it is specific to left.

Impact

Anything that computes an ink box as left + right gets a width off by 2 × |side bearing|, which scales with font size and face and looks like a metrics "convention difference" until you paint the glyph and check. We hit it in a rendering parity harness and initially attributed it to a node-canvas vs browser convention.

Environment

  • canvas 3.2.0 and 3.2.3 (both reproduce)
  • macOS 15 arm64, Node 22
Lingua principale
JavaScript
Stelle
10.7k
Fork
1.2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Automattic/node-canvas

Tutte le issue di Automattic/node-canvas

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.