title: How to TOUCH DRAW Shapes on the HTML5 Canvas
body: <p>I have a question... </p>
  
  <p>I'm trying to figure out how to <strong>touch draw</strong> shapes on an HTML5 canvas. I've been searching everywhere and so far it's been impossible to find any descent <strong>tutorial</strong> on matter. Can somebody please help me out? I know how to "draw" shapes on the canvas (with code), but how do you <strong>draw/paint</strong> with (<strong>touch</strong>) your finger for <strong>mobile apps</strong>? </p>
  
  <p>Here's my code so far...</p>
  
  <p>Javascript:</p>
  
  <hr>
  
  <pre><code>        // draws a Square to the x and y coordinates of the mouse event inside
    // the specified element using the specified context
    function drawSquare(mouseEvent, sigCanvas, context) {
  
       var position = getPosition(mouseEvent, sigCanvas);
  
       context.strokeStyle = "color";
       context.strokeRect(x,y,width,height);
    }
  
    // draws a square from the last coordiantes in the path to the finishing
    // coordinates and unbind any event handlers which need to be preceded
    // by the mouse down event
    function finishDrawing(mouseEvent, sigCanvas, context) {
       // draw the line to the finishing coordinates
       drawSquare(mouseEvent, sigCanvas, context);
  
       context.closePath();
  
       // unbind any events which could draw
       $(sigCanvas).unbind("mousemove")
                   .unbind("mouseup")
                   .unbind("mouseout");
    }
  </code></pre>
  
  <p>HTML5:</p>
  
  <hr>
  
  <pre><code>    &lt;div id="squareButton"&gt;  
      &lt;p&gt;&lt;button onclick="drawSquare();"&gt;Square&lt;/button&gt;&lt;/p&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Thanks a lot,
  Wardenclyffe</p>