Center point on html quadratic curve
quadraticCurveTo draws a quadratic Bézier curve.
The formulas to calculate the coordinates of a point at any given position (from 0 to 1) on the curve are
x(t) = (1-t)^2 * x1 + 2 * (1-t) * t * x2 + t^2 * x3
y(t) = (1-t)^2 * y1 + 2 * (1-t) * t * y2 + t^2 * y3
where (x1, y1) is the starting point, (x2, y2) is the control point and (x3, y3) is the end point.
So, turning that into JavaScript, we end up with something like
function _getQBezierValue(t, p1, p2, p3) {
var iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x: _getQBezierValue(position, startX, cpX, endX),
y: _getQBezierValue(position, startY, cpY, endY)
};
}
If you pass the start, end and control points to getQuadraticCurvePoint there, along with 0.5 for the halfway position, you should get an object with the X and Y coordinates.
Example
function _getQBezierValue(t, p1, p2, p3) {
var iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x: _getQBezierValue(position, startX, cpX, endX),
y: _getQBezierValue(position, startY, cpY, endY),
};
}
var position = 0.0;
var startPt = { x: 120, y: 10 };
var controlPt = { x: 410, y: 250 };
var endPt = { x: 10, y: 450 };
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
function drawNextPoint() {
var pt = getQuadraticCurvePoint(
startPt.x,
startPt.y,
controlPt.x,
controlPt.y,
endPt.x,
endPt.y,
position,
);
position = (position + 0.006) % 1.0;
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(pt.x - 2, pt.y - 2, 5, 5);
}
ctx.strokeStyle = "black";
ctx.moveTo(startPt.x, startPt.y);
ctx.quadraticCurveTo(controlPt.x, controlPt.y, endPt.x, endPt.y);
ctx.stroke();
setInterval(drawNextPoint, 40);<canvas id="c" width="500" height="500">