title: How to find the halfway mark on a bezier curve?
body: <p>I am trying to calculate where points are on a bezier curve, and I'm using the standard formula for doing so. That is:</p>
  <pre><code>x = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * cpX + t * t * x2;
  y = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cpY + t * t * y2;
  </code></pre>
  <p>However, I am pretty confused by the results. I've developed a demo for what I'm talking about below:</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>let c = document.querySelector("canvas");
  let ctx = c.getContext("2d");
  
  let x1 = 25;
  let y1 = 25;
  let cpX = 35;
  let cpY = 35;
  let x2 = 200;
  let y2 = 25;
  
  let f = 0;
  
  function calcX(t) {
    return (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * cpX + t * t * x2;
  }
  
  function calcY(t) {
    return (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cpY + t * t * y2;
  }
  
  function drawCurve() {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.quadraticCurveTo(cpX, cpY, x2, y2);
    ctx.stroke();
  }
  
  function drawLoop(elapsed) {  
    c.width = 600;
    c.height = 600;
    
    let x = calcX(f);
    let y = calcY(f);
  
    drawCurve();
  
    ctx.beginPath();
    ctx.rect(x, y, 3, 3);
    ctx.stroke();
    
    f = f &lt; 1 ? f + 0.001 : 0;
  
    document.querySelector(".debug").innerHTML = f.toFixed(2);
  
    requestAnimationFrame(drawLoop);
  }
  
  drawLoop(0);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.debug { position: absolute; left: 9px; top: 6px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;
  &lt;div class="debug"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see, the 50% mark seems too far to the left:</p>
  <p><a href="https://i.stack.imgur.com/P3T43.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3T43.png" alt="enter image description here" /></a></p>
  <p>I understand that there is a curve but the halfway mark still seems too far to the left. That is, if you asked a group of people where the halfway mark is on that curve, I believe all of them would say further to the right.</p>
  <p>This may be a long shot but is there another formula for calculating where points are on bezier curves that is more &quot;close to real world&quot;?</p>
  <p><strong>Edit:</strong> I just thought of another way to more concretely articulate this phenomenon. You'll notice that if you set the <code>cpX</code> and <code>cpY</code> variable values to any arbitrary number and then run the simulation that the square marker moves at different speeds along different portions of the curve. That is, it may move quickly at the start, then slow down, and then speed up again towards the end of the curve.</p>
  <p>What I'm looking for is a formula such that the square marker would more at a constant velocity along the entire curve and never speed up or slow down along the way. Is this possible?</p>