Question

When drawing lines with the HTML5 canvas element, is it possible to define the stroke style of the lines? Basically in Photoshop and other similar programs, you can define a stroke style for lines that looks like it is “hand drawn”. Is is possible to do anything like that in HTML5 canvas or am I shooting for the moon here?

Thanks

-Jesse

Answer 1

It is possible but not by default. See ShadowCloud’s post for what you can do by default (very little).

Depending on what you want, it shouldn’t be too hard.

If by “hand drawn” you mean you want jitter, you’d have to break up every drawn line/curve into smaller parts and add some noise to each of the points.

If you want a brush you’d have to break up every drawn line/curve into smaller parts and call drawImage every few pixels to emulate a photoshop brush.

Almost all of them rely on breaking up your lines and curves into smaller bits, so you should figure that out foremost.

If you decide to implement these and are having trouble breaking up bezier curves and want help, let me know and I’ll give you my code for that.