1727020 - [Bug]: Canvas rendered text gets affected by text sizing features

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Kevin Brosnan [Ex-Mozilla]]

From github: https://github.com/mozilla-mobile/fenix/issues/20959.

Steps to reproduce

1. Change the text scaling level beyond or below a 100% OR have "Automatic font sizing" enabled in Accesibility options
2. Have a page with <meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Have a canvas element
4. Render text on the canvas

Sample codepen: https://codepen.io/Eskuero/pen/WNOeOJR

This is how it looks with the different percentage of scaling

Expected behaviour

The text in the canvas should stay the same size regarless of viewport properties and browser filters.

Actual behaviour

The text gets scaled unlike in Firefox Desktop and Chrome (both versions) and ends messing up the draw because you can't have an expectancy of how it's size will rendered in relation with other drawings you might do on the canvas.

Device name

Samsung Galaxy Tab A 10.1, Xiaomi Mi A2 Lite

Android version

10

Firefox release type

Firefox

Firefox version

92.0.20210715094037

Device logs

No response

Additional information

No response

Change performed by the Move to Bugzilla add-on.

Comment 1

[Jan Henning [:JanH]]

Interesting – my intent when implementing this was that it should work like text zooming on Desktop, which indeed does not affect the rendering of canvas text.