Canvas Arc weird render behaivior

UNCONFIRMED
Unassigned

Status

()

Core
Canvas: 2D
P3
normal
UNCONFIRMED
6 months ago
3 months ago

People

(Reporter: g-uniti96, Unassigned)

Tracking

({testcase-wanted})

54 Branch
testcase-wanted
Points:
---

Firefox Tracking Flags

(firefox57 fix-optional)

Details

(Whiteboard: [gfx-noted])

Attachments

(2 attachments)

(Reporter)

Description

6 months ago
Created attachment 8879448 [details]
This ZIP contains two Images: FireFox and Chrome behaivior

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170608105825

Steps to reproduce:

I created a Canvas and used jCanvas (https://projects.calebevans.me/jcanvas/).
My Canvas has a dimension of about 2400px x 3500px at a zoom of 100%. When zooming to 200% (as shown in the attachet images) the canvas is double the size.

i have drawn a circle on the canvas in jCanvas as a Layer with type "arc". This "arc" has a radius of 0.5px. It gets his height and width iva "scale".


Actual results:

In FireFox the Circle gets rendered with small lines in between.


Expected results:

It should be rendered without those lines. As in Chrome! (Attachet Images).

Updated

6 months ago
Component: Untriaged → Canvas: 2D
Product: Firefox → Core

Comment 1

6 months ago
Could you provide a testcase, maybe on jsfiddle or codepen, you can load JS libraries.
Flags: needinfo?(g-uniti96)
Keywords: testcase-wanted
(Reporter)

Comment 2

6 months ago
Here is a fiddle: https://jsfiddle.net/s806y7fj/

You can zoom in and out to see those lines.

best regards.
Flags: needinfo?(g-uniti96)
(Reporter)

Comment 3

6 months ago
(In reply to Loic from comment #1)
> Could you provide a testcase, maybe on jsfiddle or codepen, you can load JS
> libraries.

I am sorry this link is updated: https://jsfiddle.net/s806y7fj/1/
You can get the best result at 100% Zoom.
(Reporter)

Comment 4

6 months ago
no one?

Comment 5

6 months ago
Created attachment 8881159 [details]
1374558.html

Comment 6

6 months ago
I can't reproduce it with FF54 or 56 at 100%/200% on Win 7.
(Reporter)

Comment 7

6 months ago
(In reply to Loic from comment #6)
> I can't reproduce it with FF54 or 56 at 100%/200% on Win 7.

This Bug is Resolution dependend. For me with 1920x1080 and 75%-200% there are lines rendered within the circle. Also in your attached file.
(Reporter)

Comment 8

5 months ago
any fix?
(Reporter)

Comment 9

5 months ago
I need this to be fixed :D
This looks like precision issue; the artifacts show up when using Direct2D; when using unaccelerated canvas in Firefox (which is what Chrome is using), things are fine.  It's either a different rounding scheme, or higher precision in Direct2D because of anti-aliasing.  What's jquery/jcanvas using under the covers?  Is there a minimal example without those libraries?

This may end up being tech evangelism.
status-firefox57: --- → fix-optional
Priority: -- → P3
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.