title: How to draw a fraction of a bezier curve with canvas?
body: <p>Let's say I have a bezier curve produced from the following code:</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>const ctx = document.querySelector('canvas').getContext('2d');
  
  ctx.beginPath();
  ctx.moveTo(50, 20);
  ctx.quadraticCurveTo(230, 30, 50, 100);
  ctx.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a way to only draw, say, the last 90% of it?</p>
  <p>For my application I want to &quot;consume&quot; the curve, and create an animation where a circle moves along the line path, eating the curve along the way.</p>
  <p>The only thing I could think of was to instead of drawing the curve using the <code>quadraticCurveTo</code> function, to instead calculate a huge list of points manually through the following function:</p>
  <pre><code>t = 0.5; // given example value
  x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
  y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;
  </code></pre>
  <p>And then just do <code>moveTo</code> and <code>lineTo</code> for each of the 300 or so points.</p>
  <p>But that has three issues:</p>
  <ol>
  <li>It is computationally expensive</li>
  <li>How do you determine how many points to calculate?</li>
  <li>Won't it still be jagged unless you calculate thousands of points?</li>
  </ol>
  <p>Is there a better way?</p>