CODEWITHSUNDEEP
javascripthtml5-canvas
Dennkster
Dennkster

Reputation: 2271

Simulating hand drawing on canvas

Is there a JavaScript library that simulates the canvas element but instead of creating straight lines, the lines created look 'free-form' or 'hand drawn'?

This would be very cool if it existed and it seems like someone should have already done it. Also if there are articles on the math involved in this, I would be interested because then I could try to implement this library myself.

Upvotes: 3

Views: 2428

Answers (2)

B M
B M

Reputation: 4019

Based on the article you mention: a cartoon style JS drawing library for SVG and HTML5 Canvas. It works as plugin for Raphael.js, D3.js or SVG.js or as lib for Canvas. It is called comic.js and can be found on github.

This what it can produce:

comic.js screenshot

Upvotes: 2

slebetman
slebetman

Reputation: 113974

I remember reading something about doing this a couple of years ago. Incidentally that article was doing it in javascript on canvas. The idea was basically to draw the lines yourself pixel-by-pixel using something like Bresenham's line drawing algorithm but modify it to add some random deviations/pertubations in the line.

I'm not sure if this was the page I was reading at the time but this is what google brought up today: http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5

Upvotes: 2

Related Questions