title: HTML5 drag and drop path on canvas without JS library
body: <p>I want to drag and drop path on HTML5 canvas. <br>
  I didn't find any thing like SVG provides events if we click on shape.<br>
  Anyone know how I can handle events on path item here? I want to do this without any java script library.</p>
  
  <p>Following is my current code to draw path:</p>
  
  <pre><code>var canvas = document.getElementById("html5Canvas");
  var context = canvas.getContext("2d");
  var drawing = false;
  
  canvas.addEventListener("mousedown", startDraw, false);
  canvas.addEventListener("mousemove", continueDraw, false);
  canvas.addEventListener("mouseup", endDraw, false
  
  
  function startDraw(event) 
  {
      drawing = true;
      context.moveTo(event.clientX, event.clientY);    
  }
  
  function continueDraw(event) 
  {
      if (drawing)
      {
          context.lineTo(event.clientX, event.clientY);    
          context.stroke();    
      }
  }
  
  function endDraw(event) 
  {
      if (drawing)
      {
          context.lineTo(event.clientX, event.clientY);    
          context.stroke();    
          drawing = false;
      }
  }
  </code></pre>
  
  <p>Thanks.</p>