CODEWITHSUNDEEP
htmlcanvas
jomille
jomille

Reputation: 395

Custom Line stroke in HTML5 canvas

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

Upvotes: 3

Views: 2630

Answers (2)

BFil
BFil

Reputation: 13096

There is no standard API in HTML5 Canvas to manage such thing.

You can just set the color or the width of the stroke, for example:

context.strokeStyle = '#f00'; // red color
context.lineWidth   = 4; // 4px wide

// Draw some rectangles.
context.fillRect  (0,   0, 100, 100);
context.strokeRect(0,   0, 100, 100);

You can try to get more control using a library (Processing.js or Fabric.js)

Upvotes: 1

Simon Sarris
Simon Sarris

Reputation: 63812

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.

Upvotes: 2

Related Questions