Firefox 133.0 doesn't draw arc() correctly
Categories
(Core :: Graphics: Canvas2D, defect)
Tracking
()
Tracking | Status | |
---|---|---|
firefox-esr115 | --- | unaffected |
firefox-esr128 | --- | unaffected |
firefox133 | --- | wontfix |
firefox134 | --- | wontfix |
firefox135 | --- | fixed |
People
(Reporter: aarond12, Unassigned)
References
(Regression)
Details
(Keywords: regression)
Attachments
(1 file)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0
Steps to reproduce:
Using JavaScript to draw a pie graph on a page. Previous to version 133.0, the pie graph looks fine (and continues to look fine on other browsers). Since the 133.0 upgrade, the arc() function draws VERY strange angles with non-straight lines and missing pixels in the arc itself.
Sample code:
var total = document.getElementById("total").value;
var pass = document.getElementById("pass").value;
var banned = document.getElementById("banned").value;
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var passpercent = pass / total;
//label
ctx.font = "12px Arial";
ctx.fillText("For Current Page", 50, 210);
//shadow
ctx.beginPath();
ctx.strokeStyle = "#333";
ctx.lineWidth = 96;
ctx.arc(100, 100, 48, 0, Math.PI * 2);
ctx.stroke();
//pass in green
ctx.beginPath();
ctx.strokeStyle = "#0C0";
ctx.lineWidth = 96;
ctx.arc(96, 96, 48, 0, Math.PI * (2 * passpercent));
ctx.stroke();
//fail in red
ctx.beginPath();
ctx.strokeStyle = "#F00";
ctx.lineWidth = 96;
ctx.arc(96, 96, 48, Math.PI * (2 * passpercent), Math.PI * 2);
ctx.stroke();
Actual results:
The arc segments are not completely filled and the segments (e.g., a circle with a missing pie slice) do not have straight lines anymore.
Expected results:
An arc segment (e.g., one < 360°) should be completely filled, no missing pixels, with straight lines for the segments.
In the attached "comparison.png" file, the pie graph on the left is Firefox 133.0, and on the right is Chrome, which is what Firefox also looked like prior to version 133.0.
Comment 1•2 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
![]() |
||
Updated•2 months ago
|
Comment 2•2 months ago
|
||
Does this get fixed if you go to "about"config", set gfx.canvas.accelerated to False, and restart Firefox?
Comment 3•2 months ago
•
|
||
mozregression tells me this was caused by bug 1910138 (on Windows; for macOS and Linux, it happens in earlier builds). Disabling gfx.canvas.accelerated fixes it. (Doesn't even require restarting the browser; just reload the page after toggling the pref.)
Updated•2 months ago
|
Reporter | ||
Comment 4•2 months ago
|
||
Yes, turning off "gfx.canvas.accelerated" does cause the pie chart to appear correctly.
Comment 5•2 months ago
|
||
This looks like an instance of bug 1868067. Jeff was working on this, I think.
Comment 6•2 months ago
|
||
:bhood this canvas2d change has rolled out to windows in Fx133 though it's been on mac/linux for a while.
- Could this be triaged?
- Could the team prioritze any bugs in the backlog? The depends on Bug 1868067 has an S3 severity so might not be a priority?
Comment 7•2 months ago
|
||
(In reply to Donal Meehan [:dmeehan] from comment #6)
:bhood this canvas2d change has rolled out to windows in Fx133 though it's been on mac/linux for a while.
- Could this be triaged?
- Could the team prioritze any bugs in the backlog? The depends on Bug 1868067 has an S3 severity so might not be a priority?
Jeff is working on this in bug 1868067. I will let him weigh in on the feasibility of fixing this soon and whether it warrants an upgrade from S3.
Updated•2 months ago
|
Updated•2 months ago
|
Comment 9•2 months ago
|
||
We've landed a fix for this in Nightly builds. Can you please confirm that it's working correctly for you when you have a chance? Thanks!
Reporter | ||
Comment 10•2 months ago
|
||
(In reply to Ryan VanderMeulen [:RyanVM] from comment #9)
We've landed a fix for this in Nightly builds. Can you please confirm that it's working correctly for you when you have a chance? Thanks!
It looks a lot better. The curves aren't smooth as unaccelerated video or Chrome (right in screen shot), but it's much better than it was. Screen shot shown with both browsers (nightly/Chrome) at 200% for extra detail.
Updated•17 days ago
|
Updated•17 days ago
|
Description
•