title: Create a realistic pencil tool for a painting app with HTML5 Canvas
body: <p>First I want to say that I made a lot of research and tries myself without any success. </p>
  
  <p>I am working on a MSPaint-like application using Canvas, and <strong>I would like to create a pencil tool which looks realistic like handmade drawings</strong>... Here is an example in the link below with the default tool :
  <a href="http://www.onemotion.com/flash/sketch-paint/" rel="nofollow noreferrer">http://www.onemotion.com/flash/sketch-paint/</a></p>
  
  <p>I tried to play with mousespeed and linewidth properties but it is not working well (the entire line enlarge and shrink as I move the mouse). I have no idea of an algorithm acting on pixel raw data.</p>
  
  <p>Do you know something existing or a suitable algorithm to apply ? Thank you very much for your help</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I decided to add the solution I've chosen because it seems to interest lot of people. 
  So, the best thing I found so far is to draw an image onto the canvas, using the technique explained here : <a href="http://css.dzone.com/articles/sketching-html5-canvas-and" rel="nofollow noreferrer">http://css.dzone.com/articles/sketching-html5-canvas-and</a>.
  It works like a charm, the result is really convincing and this is quite easy to implement. Try it out here : <a href="http://tricedesigns.com/portfolio/sketch/brush.html#" rel="nofollow noreferrer">http://tricedesigns.com/portfolio/sketch/brush.html#</a> </p>