1

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?

Kantesh
  • 875
  • 3
  • 8
  • 19

2 Answers2

0

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.

Johan
  • 1,537
  • 1
  • 11
  • 17
  • thank you for info..How about using bezier curve.? we could make smoother at least the edges of the lines.. – Kantesh Aug 03 '11 at 04:47
  • The bezier curve sounds like it could work, haven't worked with that much though. – Johan Aug 03 '11 at 10:49
0

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'

stslavik
  • 2,920
  • 2
  • 19
  • 31