Description

A problem that has been painful for us for some time now is browsers don't agree on how to align text when drawing to a canvas. Further, TextMetrics gives different answers in different browsers for values like fontBoundingBoxAscent/Descent depending on the text baseline, and Firefox doesn't support those properties at all. In some situations that makes the API pretty much useless - it is either not supported or gives you different answers per browser.

Rationale

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 one value in Chrome, another in Safari, and aren't supported in Firefox - 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

Not sure if this is part of the HTML or canvas specs.

There is a so far unresolved spec issue about this: whatwg/html#6731

Tests

A cursory search doesn't turn up any web-platform-tests for TextMetrics, but I guess here? https://wpt.fyi/results/html/canvas/element/drawing-text-to-the-canvas