1

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?

MFerguson
  • 1,739
  • 9
  • 17
  • 30
mediumgoal
  • 11
  • 1
  • I think you've mis-interpreted what a "control point" actually is in a quadratic curve. The control point is used to determine the amount and direction of deflection the curve will have - it isn't meant to lie on the curve. – Randy Casburn Dec 21 '22 at 19:33
  • https://math.stackexchange.com/questions/983875/equation-of-a-curved-line-that-passes-through-3-points – Konrad Dec 21 '22 at 19:34
  • 1
    Thank you for all of your answers. I've solved the problem with your helps. – mediumgoal Dec 21 '22 at 20:44

0 Answers0