CANVAS Rendering bug with 1 pixel width in ctx.strokeRect();
Reported by
wtraviso...@gmail.com,
Mar 31 2018
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Steps to reproduce the problem: 1. Visit https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_strokerect 2. Observe how the rectangle currently appears. 3. Add 0.5 to the first two strokeRect parameters. 3. Observe the difference in the rectangles appearance. What is the expected behavior? The rectangle should appear crisp with a 1 pixel stroke. What went wrong? It appears that the CANVAS is attempting to draw the stroke in between pixels as 1 / 2 = 0.5 (half pixel). This not only causes a blurry rectangle to appear, it also causes the sizing/positioning to be 1 pixel off. Did this work before? No Does this work in other browsers? Yes Chrome version: 65.0.3325.181 Channel: stable OS Version: 10.0 Flash Version:
,
Apr 4 2018
Unable to reproduce the issue on Win-10 using chrome reported version #65.0.3325.181 and latest canary #67.0.3387.0. Attached a screen cast for reference. Following are the steps followed to reproduce the issue. ------------ 1. Visited https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_strokerect 2. Observed that rectangle outline appeared bit blurry. 3. Added 0.5 to the first two strokeRect parameters. 3. Observe the the rectangle appeared crisp with a 1 pixel stroke as expected. wtravisoneal@- Could you please check the attached screen cast and please let us know if anything missed from our end. Also please check the issue on latest canary #67.0.3387.0 by creating a new profile without any apps and extensions and please let us know if the issue still persist or not. Thanks...!!
,
Apr 4 2018
I would say the video demonstrates perfectly what the problem is. When the page first loads the rectangle is anti-aliased and slightly blurred, despite using whole integer values for the dimensions and position. When you add 0.5 to it and click Run, it then appears much crisper in the video (and for me when testing with Canary). Surely adding 0.5 should _cause_ the anti-aliasing, not fix it?
,
Apr 4 2018
I am in agreement with the above comment. The video provided demonstrates the bug precisely. Before you added the 0.5, the rectangle was anti-aliased - afterwards it was fixed and crisp. You can also visibly see the rectangle shift slightly, throwing the positioning off.
,
Apr 4 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 9 2018
Able to reproduce the issue on reported chrome version 65.0.3325.181 and on the latest canary 67.0.3390.0 using Windows 10, Ubuntu 14.04 and Mac 10.13.1. As the issue is seen from M60(60.0.3112.0) considering it as Non-regression and marking it as untriaged. Thanks!
,
Apr 23 2018
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by vamshi.kommuri@chromium.org
, Apr 1 2018