title: SVG smooth freehand drawing
body: <p>I implemented a freehand drawing of a path using native JS. But as expected path edges are little aggressive and not smooth. So I have an option of using simplifyJS to simplify points and then redraw path. But like <a href="https://bl.ocks.org/mbostock/f705fc55e6f26df29354" rel="noreferrer">here</a>, instead of smoothening after drawing, I am trying to find simplified edges while drawing</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    var x0, y0;
  
      var dragstart = function(event) {
          var that = this;
          var pos = coordinates(event);
          x0 = pos.x;
          y0 = pos.y;
          that.points = [];
      };
  
      var dragging = function(event) {
          var that = this;
          var xy = coordinates(event);
          var points = that.points;
          var x1 = xy.x, y1 = xy.y, dx = x1 - x0, dy = y1 - y0;
          if (dx * dx + dy * dy &gt; 100) {
              xy = {
                  x: x0 = x1, 
                  y: y0 = y1
              };
          } else {
              xy = {
                  x: x1, 
                  y: y1
              };
          }
          points.push(xy);
      };
  </code></pre>
  
  <p>But it is not working as in the link added above. Still edges are not good. Please help.</p>
  
  <p><a href="https://i.stack.imgur.com/27GDs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/27GDs.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/4mEYm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4mEYm.png" alt="enter image description here"></a></p>