Canvas textBaseline "top" inconsistent with Chrome

• Component: Canvas
• Status: NEW ---

[Ashley Gullen]

When drawing text with canvas2d with the "top" baseline, Safari's positioning is different to Chrome.

Minimal repro: https://downloads.scirra.com/labs/bugs/text-top-baseline/index.html

Comparison Safari vs. Chrome image: https://downloads.scirra.com/labs/bugs/text-top-baseline/comparison.png

Observed result: notice the text in Safari is positioned a few pixels lower from the top.

Expected result: text positioning to be consistent across browsers. This issue makes it difficult to get consistent text positioning when drawing text to canvases, particularly if the text is positioned relatively to other content, such as a box drawn around it, or when trying to calculate vertical alignment.

I am not sure which browser is correct, so I'm filing issues with both Safari and Chrome.

[Ashley Gullen]

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

[Radar WebKit Bug Importer]

<rdar://problem/78817913>

[Said Abou-Hallawa]

Created attachment 430593 [details]
test case

I think there is also a bug in displaying the text with hanging and middle baseline, see the attached "test case".