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).
Could you provide a testcase, maybe on jsfiddle or codepen, you can load JS libraries.
Here is a fiddle: https://jsfiddle.net/s806y7fj/ You can zoom in and out to see those lines. best regards.
(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.
I can't reproduce it with FF54 or 56 at 100%/200% on Win 7.
(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.
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.