Smoothing Free drawing in Html5 canvas

I am implementing free drawing with HTML5 canvas. Currently every thing is working fine. I am using moveTo() and lineTo() for every mousemove. I have to fine tune the drawing;

when I draw some curve like开发者_如何学运维 lines with rapid movements, the drawing will be drawn like joints of straight lines. Is there any alternative way for drawing, to make the drawing smoother?

---

I dont think there is a better way for the drawing itself, however, if you put the draw functions directly onto the mouse move event handlers, then that would slow it down,

To speed that up you could just save the coordinates in an array in the event handlers and wait for the mouse to stop moving before walking trough the array and drawing.

The advantage would be that the events are called more reapidly, making smoother curves, the disadvantge would be that there is a 'lag' if you move the mouse alot.

An alternative would be to try and detect when the user curves and use the appropiate curve drawing method.

---

I actually did the same thing:

ctx.beginPath();
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position.
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call.
ctx.stroke();

Bezier Curves are great for pen-like (paths) functionality, but I've ended up with unintended results with that as well, namely the curve between P0 and P2 being too distant from P1... This can be handled by adding extra points against which to evaluate the function (taking it to higher degrees, which seems to be how adobe does it).

I've spent two days answering this question, doing a lot of research of the best examples, tearing through code where available. There are essentially two responses:

1.) Apply a filter – a box- or gaussian- blur will smooth the rough edges a little, making it look less angular.

2.) Apply a Bezier Curve – Between the mousedown and mouseup events, log an array of the points and apply the curve. The longer the line, the slower the re-rendering.(Muro - deviantArt's canvas app appears to do this). [NB: If the idea is to create an artistic web app for people to draw on, show them the original line until the smooth rendering is complete.]

I like somewhere in between, personally. A slight blur tends to soften things, especially near corners, and makes slowly placed (thus frequent, shorter lines) much softer).

Something I'll add, which may be completely obvious so I apologize: Make sure you've set your cap style to 'round' –– ctx.lineCap = 'round'