New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 243996 link

Starred by 25 users

Issue metadata

Status: Verified
Last visit > 30 days ago
Closed: Jun 2013
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug

Sign in to add a comment

Arc rendering bug in canvas

Reported by, May 25 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.94 Safari/537.36

Steps to reproduce the problem:
function Draw()
	var canv1 = document.getElementById('exp1');
		var ctx = canv1.getContext('2d');
		ctx.arc(100, 100, 10, 0, Math.PI*2, true);

	var canv2 = document.getElementById('exp2');
		var ctx = canv2.getContext('2d');
		ctx.arc(100, 100, 10, 0, Math.PI*2, true);
<body onload="Draw()">
<canvas id="exp1" style="background-color:#d4d4d4;margin:0px;padding:0px;" width="520" height="126"></canvas>
<canvas id="exp2" style="background-color:#d4d4d4;margin:0px;padding:0px;" width="520" height="127"></canvas>

What is the expected behavior?
Arc should be visible in both canvases.

What went wrong?
It is visible only in the firts one.

Did this work before? N/A 

Chrome version: 27.0.1453.94  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)

I cheked, it works under Firefox 21.0 and IE 9.0.16.
Confirmed on Chrome 27.0.1453.94 m, Windows 7 x64.

Comment 2 by, May 27 2013

Labels: -Cr-Content-JavaScript Cr-Blink-Canvas
Labels: Needs-Feedback
Unable to reproduce the issue on Win7 with chrome version 27.0.1453.94

Arc is visible on both canvases similar to firefox and IE.

Please find the screenshot for reference.

@michal.s.wojcik, Could you please recheck and let us know if the issue still exists.
2.2 KB View Download

Comment 4 by Deleted ...@, May 27 2013

Win7 Chrome 27.0.1453.94 m - arc painted as square. Is rendered fine in FF/IE. 

The square is painted on "ctx.stroke()" call above the arc _after_ arc is filled. The code is somewhat like this:;

// some painting - nothing interesting or suspicious here

ctx.arc(X, Y, 3, 0, Math.PI * 2, true);

ctx.fillStyle = "rgb(0,128,0)";
ctx.fill(); // green arc is painted

ctx.stroke(); // sqare is painted above

In my project I have lot of painting before this code. Seems like something is corrupted in the context. I wasn't able to reproduce the bug in jsfiddle yet. Will try later. 
6.6 KB View Download

Comment 5 by Deleted ...@, May 28 2013

Still can't reproduce. But works good in Win7 chrome 28.0.1500.20 beta-m

Comment 6 by, May 28 2013

Labels: Cr-Internals-GPU-Canvas2D
The two canvases in the sample code will land above and below the threshold for 2D canvas acceleration.  The GPU-accelerated canvas is the one that is failing.

Brian, Robert or Jim. Any idea what is going on?
Not sure, neither repros on my Win7 machine. michal.s.wojcik or Radgiar can you upload or paste the contents of chrome://gpu on a machine that reproduces the bug?
This web site also seems to be missing arcs rendered with canvas. Sorry it's not a simple repro.
In all other browsers I've tried (IE 9 and 10, win FF 20, mac FF 21, win chrome canary 29.0.1522.0, mac safari) there are blue circles, but with win chrome 27.0.1453.94 m there are no blue circles.
Status: Assigned
I had previously tested M26 release and canary. I can repro on my windows box using M27. This may be a shader cache key issue that was fixed in Skia after M27 branched. If so, it's a very safe cherry pick. I'll investigate.

We can reproduce this on OSX 10.8.3 , Chrome 27.0.1453.94.

context.fillStyle = 'red';
context.lineWidth = 4;
context.strokeStyle = 'blue';
context.arc(50, 50, 40, 0, Math.PI * 2, true);

Sometimes this produces the correct result (red circle, blue border).

Sometimes this code results in a blue square being drawn over the red circle.

Exactly the same web page can give different results on different tabs of the same browser.   So please try several times if you are attempting to reproduce the issue.

This is a major issue for us as it effectively breaks the HTML5 canvas specification that our business relies on.

This breaks in our webapp - the circles in the map appearing as squares (extra thick stroke) in chrome - works in all other browsers. 

Ive noticed if I set the lineWidth to under 1 it is drawn correctly
1.4 MB View Download
Labels: M-27 Merge-Requested
The bug is due to a shader cache key conflict. This was fixed by Jim in Skia shortly after the M-27 branch.  The fix is extra  super-duper safe.

Karen, can we merge it back to M27?

Comment 13 by, May 30 2013

so i've already cut stable 2. i am not sure it's worth it at this point
since it would only be there for 2 weeks... but u can request merge and we
can consider when it's time to cut #3.
Ok, merge requested.

Comment 15 by, May 30 2013

sg ty

Comment 16 by, Jun 10 2013

Labels: -Merge-Requested Merge-Approved
brian ok we can merge this. pls go ahead.
Labels: -Merge-Approved Merge-Merged
Done with this rev of Skia:
Status: Fixed
Status: Verified
Tested this issue with Latest Stable#27.0.1453.116 on Win7 - Working as intended.

Steps followed:

1. Access the URL: through latest chrome stable

2. Able to see the "Circles" in the map (As per comment#11)

PS: Attached the screenshot for your reference.

Thank you.
183 KB View Download
 Issue 245310  has been merged into this issue.

Sign in to add a comment