title: html5 canvas animate bezier curve endpoint
body: <p>I want to animate the endpoint of a bezier curve to x,y coordinates in an html5 canvas without redrawing the entire stroke.  Basically, I need to make the endpoint look as though it is draggable, and when dragged, affects the length of the line.</p>
  
  <p>This is my current standard bezier stroke code:</p>
  
  <pre><code>   var canvas = document.getElementById("myCanvas"),
         context = canvas.getContext("2d"),
         controlX1 = 140,
         controlY1 = 10,
         controlX2 = 388,
         controlY2 = 10,
         endX = 388,
         endY = 170;
  
     context.moveTo(188, 130);
     context.bezierCurveTo(controlX1, controlY1, controlX2, 
     controlY2, endX, endY);
     context.lineWidth = 10;
     context.strokeStyle = "black";
     context.stroke();
  </code></pre>
  
  <p>Does anyone have any ideas how this can be accomplished without using a library like Raphael; however, I am using jQuery, so that is an available resource.</p>