Smooth jagged lines drawn by user in HTML5 canvas app?

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/

Answer 2

As for lines or vectors .. this post is what you want

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

TL;DR use SVG

where ctx is context

ctx.lineCap = "round"

then for the drawing

ctx.beginPath();
ctx.moveTo(data.line.startX,data.line.startY);
ctx.lineTo(data.line.endX, data.line.endY);
ctx.strokeStyle = data.line.color;
ctx.stroke();

proof

http://gentle-leaf-5790.herokuapp.com/