Simulating hand drawing on canvas

Question

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.

Answer 1

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

Answer 2

Based on the article you mention, I created 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: