quadraticCurveTo: Can I determine what the vertex will be?

Question

I'm using the quadraticCurveTo function in the HTML5 canvas. My main quip with it is it uses line interpolation when I just want to dictate the vertex. I already know what my starting and ending point is. As far as I know there is no function that can do this, but is there a formula that I may use to determine my control point?

Answer 1

Given a quadratic curve's starting point, ending point & mid point, you can calculate its control point like this:

// Given 3 points on a Q-Curve (starting, ending & midpoint)
var p0=startPoint;
var p2=endPoint;  
var p1={
        x:2*midPoint.x-startPoint.x/2-endPoint.x/2,
        y:2*midPoint.y-startPoint.y/2-endPoint.y/2,
};

And then you can draw it normally onto the canvas:

ctx.moveTo(p0.x,p0.y);
ctx.quadraticCurveTo( p1.x,p1.y, p2.x,p2.y );