I am trying to draw a 1px line and it works properly in FireFox, however, in IE11 no matter what attributes I tried it seems always produce a line with 2px thick.
Asked
Active
Viewed 569 times
0
-
The line renders correctly in 1px in Chrome as well. Only IE has the problem. – MathNoobe Jul 10 '15 at 20:27
-
[This](http://stackoverflow.com/questions/3657671/in-html5-draw-from-0-5-0-to-0-5-600-to-get-a-1-pixel-thick-line-on-canvas) question may have the answer you're looking for. Specifically, [this answer](http://stackoverflow.com/a/3657831/5040429). – JSBob Jul 10 '15 at 20:27
1 Answers
0
It is impractical to set the origin to 0.5 unit. Depends on the width of your stroke that if it's odd number of units you need to add or subtract 0.5 but if it's an even number you don't. If you add or subtract 0.5 indiscriminately you end up for inconsistent line width based on the stroke size and origin. The shape-rendering:crispEdges seems to solve this problem. But looks like the problem was due to the shape-rendering: crispEdges property not being respected in IE.
MathNoobe
- 111
- 2