Issue metadata
Sign in to add a comment
|
canvas content becomes darker while i am scrolling or draw contents using key events
Reported by
ecsivasr...@gmail.com,
Jun 27 2017
|
||||||||||||||||||||||
Issue descriptionUserAgent: 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. 2. 3. What is the expected behavior? What went wrong? Hi Johnny, 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 Did this work before? Yes i think it is working fine in chrome 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.
,
Jun 28 2017
@ecsivasriram: Could you please confirm Is this bug is a dupe of issue 737080 ? Thanks!1
,
Jul 18 2017
,
Jul 31 2017
The NextAction date has arrived: 2017-07-31 |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Jun 27 2017