Drawing rounded/movable area over image

Question

I would like to draw rounded area and points over a photo. I decided to do it with a svg which is simplier to make it resizable and movable.

But, from a list of points I do not have an area which go through all points. I used the Quadratic Bezier CurveTo, but I am not able to find the mathematic formula to give the the "Q parameter" the values to calculate the control point to go from A to C passing by B. For the moment, when the angle is too high, the line "turn" before the point, but i would like to go touch the point.

Answer 1

There is infinite number of curves through point B.

Let define that B lies on the curve at parameter t=1/2

Quadratic curve with unknown control point Q has equation

P(t) = A*(1-t)^2 + 2*Q*t*(1-t) + C*t^2

Substiting point B and t=1/2, we have

B = A/4 + Q/2 + C/4

Q = 2*B - A/2 - C/2
or in coordinates
Q.x = 2*B.x - A.x/2 - C.x/2
Q.y = 2*B.y - A.y/2 - C.y/2

This very simple method should work well when B is near symmetrical relative to A and C

Q.x = 2*7 - 0 - 20/2 = 4
Q.y = 2*10 - 0 - 0 = 20