title: How do I hand draw on canvas with JavaScript?
body: <h2>Question</h2>
  
  <p>How do I draw free (using my mouse / fingers) on a canvas element like you can do it in paint with a pencil?</p>
  
  <h2>About this question</h2>
  
  <p>There are a lot of questions that want to achieve free hand drawing on canvas:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/q/2368784/562769">draw by mouse with HTML5 Canvas</a></li>
  <li><a href="https://stackoverflow.com/q/19355120/562769">KineticJS - Draw free with mouse</a></li>
  <li><a href="https://stackoverflow.com/q/19190135/562769">Free drawing on canvas using fabric.js</a></li>
  <li><a href="https://stackoverflow.com/q/7330748/562769">Sketching with JS</a></li>
  <li><a href="https://stackoverflow.com/q/20757990/562769">Paint canvas not working properly</a></li>
  <li><a href="https://stackoverflow.com/q/20892632/562769">Mouse position on canvas painting</a></li>
  <li><a href="https://stackoverflow.com/q/10567287/562769">Implementing smooth sketching and drawing on the  element</a></li>
  </ul>
  
  <p>So I thought it would be a good idea to make a reference question, where every answer is community wiki and contains a explanation for exactly one JavaScript library / pure JavaScript how to do paint on canvas.</p>
  
  <h2>Structure of answers</h2>
  
  <p>The answers should be community wiki and use the following template:</p>
  
  <pre><code>## [Name of library](Link to project page)
  ### Simple example
      A basic, complete example. That means it has to contain HTML 
      and JavaScript. You can start with this:
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Simple example&lt;/title&gt;
          &lt;script type='text/javascript' src='http://cdnjs.com/[your library]'&gt;&lt;/script&gt;
          &lt;style type='text/css'&gt;
              #sheet {
                  border:1px solid black;
              }
          &lt;/style&gt;
          &lt;script type='text/javascript'&gt;
              window.onload=function(){
                  // TODO: Adjust
              }
          &lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;canvas id="sheet" width="400" height="400"&gt;&lt;/canvas&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  
      If possible, this example should work with both, mouse and touch events.
  
  [JSFiddle](Link to code on jsfiddle.net)
  
  This solution works with:
  
  &lt;!-- Please test it the following way: Write "Hello World"
    Problems that you test this way are:
     * Does it work at all?
     * Are lines separated?
     * Does it get slow when you write too much?
  --&gt;
  
  * Desktop computers:
    * [Browser + Version list]
  * Touch devices:
    * [Browser + Version list] on [Device name]
  
  ### Import / Export
  Some explanations how to import / export user drawn images.
  
  ### Line smoothing
  Explanations about how to manipulate the line the user draws. 
  This can include:
    * Bézier curves
    * Controlling thickness of lines
  </code></pre>