HTML5 Canvas: Incorrect circular fill with stroke
Reported by
yi.ka...@gmail.com,
Dec 6 2016
|
||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
Steps to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="300"></canvas>
<script>
var c = document.getElementsByTagName('canvas')[0].getContext('2d');
var r = 30, b = 150;
c.arc(150, 150, r, 0, 2*Math.PI);
c.fillStyle = 'rgba(0,0,0,1)';
c.lineWidth = b;
c.strokeStyle = 'rgba(0,0,0,0.5)';
c.fill(), c.stroke();
</script>
</body>
</html>
What is the expected behavior?
What went wrong?
The gray outer circle should touch the inner black circle. Instead, a white ring is shown in between the gray and black circles. This happens when the line width (var b) is more than 4 times of radius (var r).
Did this work before? N/A
Chrome version: 54.0.2840.99 Channel: stable
OS Version: 7
Flash Version:
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: 5.1.7 FAIL
Firefox: 50.02 OK
IE: 11.0 OK
,
Dec 6 2016
Issue 671725 has been merged into this issue.
,
Dec 7 2016
,
Dec 8 2016
Tested on windows 10 using chrome latest stable and canary M55 #55.0.2883.75 & M57 #57.0.2944.0 and issue is reproduced. Issue is seen from M32 #32.0.1652.0 and it is a non-regression issue. Marking it as untriaged. Thanks !
,
Dec 8 2016
on windows, firefox behavios correctly while chrome is wrong. But on linux, both are wrong.
,
Dec 12 2016
Looks like an issue with path rasterization in skia. Assigning to Cary for further investigation/triage.
,
Dec 12 2016
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by manoranj...@chromium.org
, Dec 6 2016