Canvas text rendering and metrics (2027 edition)

Description

Note this was previously submitted for interop 2023 (#159), 2024 (#427) 2025 (#817) and 2026 (#1091).

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.

Rationale

This is important for any kind of precise text alignment when drawing text to a canvas. It is important for the web-based game development tool Construct and likely other cases where text layout on canvas is important (e.g. canvas-based word processors or design tools).

Sample complaints from developers (just a selection of many such reports):
https://github.com/Scirra/Construct-bugs/issues/6137
https://github.com/Scirra/Construct-bugs/issues/6255
https://github.com/Scirra/Construct-bugs/issues/7164

In the survey in https://github.com/web-platform-tests/interop/issues/246 "Canvas text rendering" was selected by ~15% of survey takers.

Investigation Roadmap

The main canvas specification is here: https://html.spec.whatwg.org/multipage/canvas.html

The following browser issues have been filed:
https://issues.chromium.org/issues/40769053
https://issues.chromium.org/issues/40752202
https://bugs.webkit.org/show_bug.cgi?id=226334

Discussion of these led to filing the following specification issue: https://github.com/whatwg/html/issues/6731
This references the following other specification issues/PRs:
https://github.com/whatwg/html/issues/2470
https://github.com/whatwg/html/pull/5826
https://github.com/whatwg/html/issues/5830

It appears the open specification issues need to be resolved, and it looks like tests also need to be written once the specification issues have been cleared up.

Start with the canvas section of the HTML specification and review the linked Chromium, WebKit, and WHATWG issues. Determine the specification changes needed for consistent text alignment and TextMetrics values, then write web-platform tests after the specification questions are resolved; done means the relevant browser behavior is covered by interoperable tests.