Question

We have an HTML5 drawing app where users can draw lines using a pencil tool.

Compared to Flash-based drawing apps, the lines have slightly jagged edges and appear somewhat blurry. This happens because users need to keep the line perfectly straight while drawing, or the algorithm senses every pixel deviation and projects it as a jagged edge.

Drawing smooth, sharp circles is impossible as a result.

Somehow, other drawing apps are able to smooth out these jagged edges while letting users draw lines (straight or not).

Is there a way we can smooth out these lines?

Demo (choose the pencil tool): http://devfiles.myopera.com/articles/649/example5.html

Our app uses similar code.

Answer 1

Here’s an example of a quick way using quadratic curves and ’round’ lineJoin:

http://jsfiddle.net/NWBV4/10/