Closed Bug 1935418 Opened 2 months ago Closed 2 months ago

Firefox 133.0 doesn't draw arc() correctly

Categories

(Core :: Graphics: Canvas2D, defect)

Firefox 133
defect

Tracking

()

RESOLVED FIXED
135 Branch
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.

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.

Component: Untriaged → Layout: Text and Fonts
Product: Firefox → Core
Component: Layout: Text and Fonts → Graphics: Canvas2D

Does this get fixed if you go to "about"config", set gfx.canvas.accelerated to False, and restart Firefox?

Flags: needinfo?(aarond12)

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.)

Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
Regressed by: 1910138

Yes, turning off "gfx.canvas.accelerated" does cause the pie chart to appear correctly.

Flags: needinfo?(aarond12)

This looks like an instance of bug 1868067. Jeff was working on this, I think.

Depends on: 1868067
Flags: needinfo?(lsalzman) → needinfo?(jmuizelaar)

: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?
Flags: needinfo?(bhood)

(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.

Severity: -- → S3
Flags: needinfo?(bhood)
Status: NEW → RESOLVED
Closed: 2 months ago
Duplicate of bug: 1868067
Resolution: --- → DUPLICATE

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!

Flags: needinfo?(jmuizelaar) → needinfo?(aarond12)

(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.

https://axyz.us/axyz/nightlyscreenshot.png

Flags: needinfo?(aarond12)
No longer duplicate of bug: 1868067
Resolution: DUPLICATE → FIXED
Target Milestone: --- → 135 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: