226334 2021-05-27 08:58:01 -0700 Canvas textBaseline "top" inconsistent with Chrome 2024-10-07 13:28:28 -0700 1 1 1 Unclassified WebKit Canvas Safari 14 Unspecified Unspecified NEW InRadar P2 Normal --- 1 ashley webkit-unassigned dino mmaxfield ryan sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 1764342 0 ashley 2021-05-27 08:58:01 -0700 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. 1764343 1 ashley 2021-05-27 09:00:34 -0700 Corresponding Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1213949 1766408 2 webkit-bug-importer 2021-06-03 08:58:16 -0700 <rdar://problem/78817913> 1766840 3 430593 sabouhallawa 2021-06-04 10:59:17 -0700 Created attachment 430593 test case I think there is also a bug in displaying the text with hanging and middle baseline, see the attached "test case". 430593 2021-06-04 10:59:17 -0700 2021-06-04 10:59:17 -0700 test case canvas-baseline-test.html text/html 694 sabouhallawa PGh0bWw+PGhlYWQ+CjxtZXRhIGNoYXJzZXQ9InV0ZjgiPgo8dGl0bGU+VGV4dCB0b3AgYmFzZWxp bmU8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5Pgo8Y2FudmFzIGlkPSJjYW52YXMiIHdpZHRoPSI3MDAi IGhlaWdodD0iNjAwIj48L2NhbnZhcz4KPHNjcmlwdD4KCWNvbnN0IGJhc2VsaW5lcyA9IFsndG9w JywgJ2hhbmdpbmcnLCAnbWlkZGxlJywgJ2FscGhhYmV0aWMnLCAnaWRlb2dyYXBoaWMnLCAnYm90 dG9tJ107CgoJY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImNhbnZhcyIp OwoJY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoIjJkIik7CgljdHguZm9udCA9ICIzNnB0 IEFyaWFsIjsKCWN0eC5maWxsU3R5bGUgPSAiYmxhY2siOwoJY3R4LnN0cm9rZVN0eWxlID0gJ3Jl ZCc7CgoJYmFzZWxpbmVzLmZvckVhY2goZnVuY3Rpb24oYmFzZWxpbmUsIGluZGV4KSB7CgkJY3R4 LnRleHRCYXNlbGluZSA9IGJhc2VsaW5lOwoJCWNvbnN0IHkgPSBpbmRleCAqIDgwOwogIAkJY3R4 LmJlZ2luUGF0aCgpOwogIAkJY3R4Lm1vdmVUbygwLCB5ICsgMC41KTsKICAJCWN0eC5saW5lVG8o ODAwLCB5ICsgMC41KTsKICAJCWN0eC5zdHJva2UoKTsKCQljdHguZmlsbFRleHQoJ0FiY2RlZmdo aWprbG1ub3AgKCcgKyBiYXNlbGluZSArICcpJywgMCwgeSk7Cgl9KTsKPC9zY3JpcHQ+Cgo8L2Jv ZHk+PC9odG1sPg==