title: Modify path with anchor points on HTML5 canvas
body: <p>My problem is how to make a UI where the user can modify a complex path by dragging anchor points that are <strong>on</strong> the path. Note <strong>on</strong> - for example the control points for Bezier curves in this <a href="https://konvajs.github.io/docs/sandbox/Modify_Curves_with_Anchor_Points.html" rel="nofollow noreferrer">example in the Konvajs documentation</a> are off the path itself, whereas I prefer anchor points <strong>on</strong> a complex path.</p>
  
  <p>I will be trying to modify a curve created as in <a href="https://stackoverflow.com/questions/53214214/animate-drawing-of-path-on-html5-canvas/53232742#53232742">this question</a>.</p>
  
  <p>Here is a snippet that draws a sample path. Can anyone help me please? Scroll the snippet window down slightly then click on the rectangle to see the path animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var stage = new Konva.Stage({
          container: 'container',
          width: 500,
          height: 500
      });
  
      var layer = new Konva.Layer();
  
      var rect = new Konva.Rect({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          stroke: '#555',
          strokeWidth: 3,
          fill: '#ddd',
          width: 50,
          height: 50,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffset: [10, 10],
          shadowOpacity: 0.2,
          cornerRadius: 10
      });
  
      var path = new Konva.Path({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          data: 'M30 10 C-20 -50 -20 -70 50 -80 C150 -100 50 -150 -100 -80',
          stroke: '#00D2FF',
          strokeWidth: 5
      });
  
      var pathLen = path.getLength() + 10;
      path.dashOffset(pathLen);
      path.dash([pathLen]);
  
      var anim = new Konva.Animation(function (frame) {
          var dashLen = pathLen - frame.time / 5;
          if (dashLen &lt; 0) {
              var tween = new Konva.Tween({
                  node: path,
                  duration: 1,
                  strokeWidth: 10,
                  easing: Konva.Easings.ElasticEaseOut
              });
              tween.play();
              anim.stop();
          } else {
              path.dashOffset(dashLen);
          }
      }, layer);
  
      rect.on('mousedown', function() {
          anim.start();
      })
  
  
      layer.add(path);
      layer.add(rect);
  
      stage.add(layer);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"&gt;&lt;/script&gt;
  &lt;div id='container' style="display: inline-block; width: 500px, height: 500px; background-color: silver; overflow: hidden; position: relative;"&gt;&lt;/div&gt;
  &lt;div id='img'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, can anyone suggest why part of the curve is drawn before the animation runs?</p>