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

[bluematter]

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