Automattic / Automattic/node-canvas
actualBoundingBoxLeft has the sign inverted relative to canvas's own rasteriser (3.2.0, 3.2.3)
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
## 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.
```js
// 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running the standalone Node.js repro and compare measureText().actualBoundingBoxLeft with the painted raster for the listed glyphs. Trace the text-metrics implementation used by measureText(), then verify that the reported left value follows the HTML specification and agrees with the raster result while actualBoundingBoxRight remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100