I am making a projectile motion simulation using canvas and I need to draw the line of the projectile's path (trajectory). I believe the best way to do this would be to draw a bezier curve using the quadraticCurveTo() method to accomplish this (since projectile motion can be modeled with a parabola).
I know the start and end points of the parabola along with the max value, but I am not sure how I would go about calculating the control point for my bezier curve.
There are more accurate ways to calculate a quadratic control point, but this close approximation has the benefit of being very quick to calculate:
// calc a control point
var cpX = 2*anywhereOnCurveX -startX/2 -endX/2;
var cpY = 2*anywhereOnCurveY -startY/2 -endY/2;
Here's a live demo which calculates the approximate control point given a starting point, ending point and any point on the curve (any point other than the start/end point):