2

Well, if I draw a line with an odd value of lineWidth in HTML5 Canvas I get a blurred line and I know the reason for this problem.

Now, I want to know the solutions to overcome this. I already know a solution for this and which i couldn't implement now. So, please comment on any other solution for this problem.

My Solution : If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.

Let me know if any other solutions other than the above

Prasath K
  • 4,950
  • 7
  • 23
  • 35
  • possible duplicate of [Drawing lines in canvas, but the last ones are faded](http://stackoverflow.com/questions/10373695/drawing-lines-in-canvas-but-the-last-ones-are-faded) – Denys Séguret Feb 20 '13 at 11:32
  • SVG allows you to set a `crispEdges` rendering mode; unfortunately not possible for canvas: http://stackoverflow.com/questions/11353499/svg-canvas-shape-rendering-crispedges-via-javascript – Andrew Mao Feb 21 '13 at 02:43
  • I am not supposed to use SVG ... – Prasath K Feb 21 '13 at 04:20

1 Answers1

3

Happily (and Sadly) you have correctly implemented "pixel-snapping" when you add/subtract .5 pixels to get your lines to align with pixel boundaries. Unlike Photoshop, there is no option to automatically pixel snap in canvas. ...I feel your pain!

markE
  • 102,905
  • 11
  • 164
  • 176