Issue metadata
Sign in to add a comment
|
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
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Dec 6 2016Status: Duplicate (was: Unconfirmed)