Canvas text rendering and metrics (2025 edition)

[AshleyScirra]

Description

Note this was previously submitted for interop 2023 (#159) and 2024 (#427).

A long-standing problem that has been painful for us for some years now is browsers don't agree on how to align text when drawing to a canvas. Further, TextMetrics gives three different answers in different browsers for values like fontBoundingBoxAscent/Descent depending on the text baseline - in one case we get three different sets of values across Chrome, Firefox and Safari. In some situations that makes the API pretty much useless, since you can't achieve things like consistent alignment across browsers.

Positioning text precisely on canvases is important for things like buttons and text layout. For example a canvas game may have a text label drawn on top of a button graphic with a border. Carefully placing the text so it's aligned correctly in one browser will still show it misaligned in another browser. There doesn't seem to be any good workaround to this.

TextMetrics is important for things like canvas text layout. If you want to draw some text on a canvas vertically aligned inside a box, you may need to take in to account the fontBoundingBoxAscent/Descent. However those values return inconsistent values across browsers, which basically makes the API useless for precisely aligning text. You have to pick one browser to display it right and the others will be wrong.

Specification

https://html.spec.whatwg.org/multipage/canvas.html

Additional Signals

Chrome issue reports:
https://bugs.chromium.org/p/chromium/issues/detail?id=1213949
https://bugs.chromium.org/p/chromium/issues/detail?id=1183752

Safari issue report:
https://bugs.webkit.org/show_bug.cgi?id=226334

Sample complaints from developers:
Scirra/Construct-bugs#6137
Scirra/Construct-bugs#6255
Scirra/Construct-bugs#7164
We get a steady trickle of such reports as developers keep running in to the same problem.

In the survey in #246 "Canvas text rendering" was selected by ~15% of survey takers.

[schenney-chromium]

There is active work on extending test metrics in Canvas that I think would make this more relevant. i.e. I don't think the extensions will improve the existing interop situation, but we also do not want to make it worse. Now would be a good time to improve things.

See whatwg/html#10677

An even more ambitious proposal to bring HTML content into canvas is at https://github.com/WICG/canvas-place-element