1374558 - Canvas Arc weird render behaivior

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[g-uniti96]

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

Comment 1

[Loic]

Could you provide a testcase, maybe on jsfiddle or codepen, you can load JS libraries.

Comment 2

[g-uniti96]

Here is a fiddle: https://jsfiddle.net/s806y7fj/

You can zoom in and out to see those lines.

best regards.

Comment 3

[g-uniti96]

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

Comment 4

[g-uniti96]

no one?

Comment 5

[Loic]

Attachment: 1374558.html

Comment 6

[Loic]

I can't reproduce it with FF54 or 56 at 100%/200% on Win 7.

Comment 7

[g-uniti96]

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

Comment 8

[g-uniti96]

any fix?

Comment 9

[g-uniti96]

I need this to be fixed :D

Comment 10

[Milan Sreckovic [:milan] (needinfo for best results)]

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.