Automattic / Automattic/node-canvas

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

Open
#2,620 0 comments 0 reactions 0 assignees View on GitHub
Bug
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.