How can I draw a quadratic curve that is going through a certain control point

54 Views Asked by At

I'm trying to draw a quadratic curve that has movable control points on the canvas. Everything is okay but how can I draw a quadratic curve that is going through a certain control point?

I tried this:

const startPoints = [0,0];
const controlPoints = [100, 40];
const endPoints = [200, 200];

ctx.moveTo(...startPoints);
ctx.quadraticCurveTo(...controlPoints, ...endPoints);
ctx.stroke();

It draws a quadratic curve like this (purple circles are the points):

enter image description here

the middle circle is the control point of the curve.

But what I want to draw is like this:

enter image description here

I mean, I want the quadratic curve to go through the control point. How can I do that?

0

There are 0 best solutions below