New issue
Advanced search Search tips

Issue 737080 link

Starred by 2 users
Status: Duplicate
Merged: issue 682074
Owner: ----
Closed: Jun 2017
Cc:
ericrk@chromium.org
pbomm...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Canvas Rendering Issue In Chromium only

Reported by ecsivasr...@gmail.com, Jun 27 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Steps to reproduce the problem:
1. I have attached the sample code.
2. Just run the code and follow the steps provided in sample.
3. You can able to see the difference of normal content and darker content on time delay.

What is the expected behavior?
The content rendering should be consistent like in all browsers.

What went wrong?
canvas content becomes darker while i am scrolling or draw contents using key events

Did this work before? Yes  Yes it is worked in previous versions. Chrome version 55.0.2883.75

Does this work in other browsers? Yes

Chrome version: 59.0.3071.115  Channel: stable
OS Version: 10.0
Flash Version: 

This issue not reproducing while disabling the GPU rasterization in flags tab.

Comment 1 by ecsivasr...@gmail.com, Jun 27 2017 

Hi Team,

I am facing an issue while drawing text contents in latest chrome. Sometimes the text will be darker and sometimes it is lighter. That is the text rendering is inconsistent. We have reported this issue in google forum. but we can't get the solution. Please help us how to resolve this issue. Please find the below forum link for your reference.

Forum Link:
https://productforums.google.com/forum/#!msg/chrome/pyLTsyRfGcs/aC8DcK-QAgAJ

Please find the below code snippet for reproducing this issue.
Sample Code:
<!doctype html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body { padding: 20px; } canvas { border: 0px solid red; } </style> <script> var ctxs = []; var context1, context2, context3, context4, context5, context6; $(function () { var canvas1 = document.getElementById("canvas1"); canvas1.style.width = "700px"; canvas1.style.height = "100px"; var ctx1 = canvas1.getContext("2d"); var canvas2 = document.getElementById("canvas2"); canvas2.style.width = "700px"; canvas2.style.height = "100px"; var ctx2 = canvas2.getContext("2d"); var canvas3 = document.getElementById("canvas3"); canvas3.style.width = "700px"; canvas3.style.height = "100px"; var ctx3 = canvas3.getContext("2d"); var canvas4 = document.getElementById("canvas4"); canvas4.style.width = "700px"; canvas4.style.height = "100px"; var ctx4 = canvas4.getContext("2d"); var canvas5 = document.getElementById("canvas5"); canvas5.style.width = "700px"; canvas5.style.height = "100px"; var ctx5 = canvas5.getContext("2d"); var canvas6 = document.getElementById("canvas6"); canvas6.style.width = "700px"; canvas6.style.height = "100px"; var ctx6 = canvas6.getContext("2d"); ctx1.font = "14px Times New Roman"; ctx2.font = "14px Times New Roman"; ctx3.font = "14px Times New Roman"; ctx4.font = "14px Times New Roman"; ctx5.font = "14px Times New Roman"; ctx6.font = "14px Times New Roman"; ctxs.push(ctx1); ctxs.push(ctx2); ctxs.push(ctx3); ctxs.push(ctx4); ctxs.push(ctx5); ctxs.push(ctx6); context1 = ctx1; context2 = ctx2; context3 = ctx3; context4 = ctx4; context5 = ctx5; context6 = ctx6; }); function addText() { renderStatic(); var int = setInterval(render, 1000); } function renderStatic() { var text = "Hello world, this is just a sample to show canvas text rendering in Chrome latest browser."; var width = ctxs[0].measureText(text).width; for (var i = 0; i < 3; i++) { ctxs[i].clearRect(0, 0, 700, 700); renderCanvas(ctxs[i], text, width); } } function render() { var text = "Hello world, this is just a sample to show canvas text rendering in Chrome latest browser."; var width = ctxs[0].measureText(text).width; for (var i = 3; i < ctxs.length; i++) { clearCanvas(ctxs[i]); } var timer = setTimeout(function () { renderCanvas(context4, text, width); }, 250); var timer = setTimeout(function () { renderCanvas(context5, text, width); }, 500); var timer = setTimeout(function () { renderCanvas(context6, text, width); }, 750); } function renderCanvas(context, text, width) { context.fillText(text, 20, 20); context.fillText(text, 20, 40); context.fillText(text, 20, 60); context.fillText(text, 20, 80); } function clearCanvas(context) { context.clearRect(0, 0, 700, 700); } </script> </head> <body> <p>1. Click fill text.</p><br /> <p>2. You can see the difference in text quality in canvas.</p><br /> <button id="fillText" style="width:80px; height:40px" onclick="addText()">Fill Text</button><br /> <table> <tr> <th> Static Canvas </th> <th> Refreshes each 1 s </th> </tr> <tr> <td> <canvas id="canvas1" width="700" height="120"></canvas> </td> <td> <canvas id="canvas4" width="700" height="120"></canvas> </td> </tr> <tr> <td> <canvas id="canvas2" width="700" height="120"></canvas> </td> <td> <canvas id="canvas5" width="700" height="120"></canvas> </td> </tr> <tr> <td> <canvas id="canvas3" width="700" height="120"></canvas> </td> <td> <canvas id="canvas6" width="700" height="120"></canvas> </td> </tr> </table> </body> </html>

 
Kindly run this code in latest chrome version and click the fill text button provided in the sample. You can see the difference in stable canvas and canvas rendering with 1 second of delay. Also, please find the attached screenshot for your reference.


Please help me how to resolve this issue. Thanks in advance.


Regards,
Sriram P
Chrome Issue.png
74.7 KB View Download

Comment 2 by pbomm...@chromium.org, Jun 27 2017

Cc: pbomm...@chromium.org ericrk@chromium.org
Components: Internals>GPU>Rasterization
Labels: M-59
cc'inf ericrk@ for further triage of the bug.

Comment 3 by ecsivasr...@gmail.com, Jun 28 2017 

Hi ericrk,

Thank you for your update. Could you please let me know the status of this bug?

Regards,
Sriram P

Comment 4 by ericrk@chromium.org, Jun 28 2017

Mergedinto: 682074
Status: Duplicate (was: Unconfirmed)
I believe this is a duplicate of 682074. Please re-open if this is not fixed in M60. Thanks!

Comment 5 by ecsivasr...@gmail.com, Jun 28 2017 

Hi ericrk,

Thank you for your update. Kindly let me know how many days it will take?

Regards,
Sriram P

Comment 6 by ericrk@chromium.org, Jun 28 2017 

This fix should be available now in Chrome 60 Beta. If you want to try that out and confirm that your issue is resolved, that would be great!

In Chrome Stable, this should be fixed when we launch Chrome 60, you can see the estimated date here: https://www.chromium.org/developers/calendar - currently estimated at around July 26th.

Comment 7 by ecsivasr...@gmail.com, Jun 28 2017 

Thats great. Have a good day 😊

Comment 8 by schenney@chromium.org, Jul 18 2017 

 Issue 737060  has been merged into this issue.
►

Sign in to add a comment