1874314 - Accelerated Canvas 2D - Large Anti-Aliasing Error

Status: VERIFIED FIXED

(Core :: Graphics: Canvas2D, defect)

Description

[Thomas Brierley]

Attachment: firefox-canvas-anti-aliasing-error.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Steps to reproduce:

Set up a canvas and 2d context. Draw a rectangle with the parameters (0.5, 0.5, 1e-5, 64)

Actual results:

A highly visible line is drawn.

Expected results:

The command should barely affect the pixels if at all.

This is dependent on layers.acceleration.disabled=false (the default), and the position starting on a non-integer value, the effect being most prominent at +-0.5, +-0.5. The canvas must also be at least 2^14 pixels (64KB).

This affects more than fillRect. I've also found it to affect at least fillPath and strokePath with exactly the same behaviour in terms of sensitivity to the position of the upper left extents of the rendered shape.

The attached test case is a series of such thin fillRect commands between 0 and 1 width, starting at the centre of each pixel on the first row. This should render a linear gradient to demonstrate anti-aliasing behaviour. The pixels on the left half are the result of a single fillRect command between 0 and 0.5 width, but they all behave the same as 0.5 width, as if they are being ceiled.

Similarly you can replace the width X/W in the test case with 1e-5 and it will render a dark grey block.

In both cases if the 0.5 offset is removed from X and Y, or layers.acceleration.disabled is set to true, the error disappears.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: Canvas2D' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Timothy Nikkel (:tnikkel)]

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=ae4cb105d717e490f8a2d71c996a05c76dba63bc&tochange=306869bdfd8ec55b1698459b6ab3dddf212b1906

so most likely bug 1773712

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

:lsalzman, since you are the author of the regressor, bug 1773712, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 4

[Thomas Brierley]

Hi Timothy

Note that I discovered this on Linux. On the other hand, I noticed this regress quite a while ago when some new acceleration configs were flipped on by default which sounds very much the same as that MacOS issue... At the time I just flipped it back off because I didn't have the time to dig into it.

Comment 5

[Timothy Nikkel (:tnikkel)]

Good point. There would be a similar preference flip for the same thing but on Linux at a different time in a different bug. You could find that if you like but I think knowing what caused this to regress is enough.

Comment 6

[Peter]

We hit this issue in production, causing our rectangles to be blurred. It seems related to the new GPU canvas implementation. The workaround is to turn off GPU accel in FF settings, which isn't something we can recommend to our users. In the meantime we turned off GPU accel on canvas context with:

canvas.getContext("2d", { willReadFrequently: true })

Comment 7

[Lee Salzman [:lsalzman]]

Attachment: Bug 1874314 - Better anti-aliasing for subpixel rectangles. r?aosmond

The existing distance-to-edge AA scheme breaks down somewhat when rectangles
have subpixel areas. We need to bias the AA to account for this situation when
the scales get to these subpixel sizes.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/70079816fdc3
Better anti-aliasing for subpixel rectangles. r=aosmond

Comment 9

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/70079816fdc3

Comment 10

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on Firefox 128.0 on Ubuntu 22 using the testcase from Comment 0.
Verified as fixed on Firefox 129.0b2 and Firefox Nightly 130.0a1 on Ubuntu 22, macOS 14, Windows 10.

Comment 11

[Ryan VanderMeulen (PTO, back July 27)]

Please nominate this and bug 1911019 for ESR128 approval when you get a chance. They graft cleanly.

Comment 12

[Lee Salzman [:lsalzman]]

Comment on attachment 9409931 [details]
Bug 1874314 - Better anti-aliasing for subpixel rectangles. r?aosmond

ESR Uplift Approval Request

• If this is not a sec:{high,crit} bug, please state case for ESR consideration: Rendering artifacts in Canvas2D.
• User impact if declined: Rendering artifacts in Canvas2D.
• Fix Landed on Version: 129
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Seems stable in nightly.

Comment 13

[Lee Salzman [:lsalzman]]

It should be noted that the follow-up in bug 1911019 is also required to uplift to ESR to fully fix this.

Comment 14

[Ryan VanderMeulen (PTO, back July 27)]

Comment on attachment 9409931 [details]
Bug 1874314 - Better anti-aliasing for subpixel rectangles. r?aosmond

Approved for 128.2esr.

Comment 15

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr128/rev/dd27237cd034

Comment 16

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on Firefox 128.0 on Ubuntu 22 using the testcase from Comment 0.
Verified as fixed on Firefox ESR 128.2.0 on Ubuntu 22, macOS 14, Windows 10.