title: Draw svg path with mouse
body: <p>I want to draw SVG path with mouse on canvas.
  I don't want any library like rapheal.js here to draw shapes, I want pure JS.</p>
  
  <p>I have creaed JS:</p>
  
  <pre><code>var svgCanvas = document.getElementById("svgCanvas");
  var svgPath;
  svgCanvas.addEventListener("touchstart", startDrawTouch, false);
  svgCanvas.addEventListener("touchmove", continueDrawTouch, false);
  svgCanvas.addEventListener("touchend", endDrawTouch, false);
  
  function startDrawTouch(event) 
  {
    var touch = event.changedTouches[0];    
    svgPath =  createSvgElement("path");
    svgPath.setAttribute("fill", "none");
    svgPath.setAttribute("shape-rendering", "geometricPrecision");
    svgPath.setAttribute("stroke-linejoin", "round");
    svgPath.setAttribute("stroke", "#000000");
  
    svgPath.setAttribute("d", "M" + touch.clientX  + "," + touch.clientY);  
    svgCanvas.appendChild(svgPath);
  }
  
  function continueDrawTouch(event) 
  {
      if (svgPath)
      {
        var touch = event.changedTouches[0];    
        var pathData = svgPath.getAttribute("d");  
        pathData = pathData + " L" + touch.clientX + "," + touch.clientY
        svgPath.setAttribute("d", pathData);  
      }
  }
  
  function endDrawTouch(event) 
  {
      if (svgPath)
      {
        var pathData = svgPath.getAttribute("d");  
        var touch = event.changedTouches[0];    
        pathData = pathData + " L" + touch.clientX + "," + touch.clientY
        svgPath.setAttribute("d", pathData);  
        svgPath = null;
      }
  }
  
  function createSvgElement(tagName)
  {
          return document.createElementNS("http://www.w3.org/2000/svg", tagName);
  }
  </code></pre>
  
  <p>This take time on tablet to draw path. Having performance issue, in case you have better idea please share.</p>
  
  <p>Thanks in advance.</p>