[panabee]

quick question: how are you able to let users render sharp lines on the canvas elem?

when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable.

here is some sample code: http://jsfiddle.net/NWBV4/10/

would you mind sharing how you overcame this issue?

thanks!

[pavlov]

You probably need to offset the line coordinates by (0.5, 0.5).

This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example.

Hopefully that makes some sense (typed on a phone...)