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

Open
  • Is something wrong?
#2,620 1 comment 0 reactions 0 assignees View on GitHub

@florianaltendorfer is already working on this.

Since Oct 24, 2026.

  • #2631 by @florianaltendorfer — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript, node.js
Domain
computer-graphics

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.

Description

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
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
No merged PRs in 30d

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/node-canvas

All issues in Automattic/node-canvas

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.