CODEWITHSUNDEEP
javascriptgeometryhtml5-canvascoordinates
user1490238
user1490238

Reputation: 261

Draw ellipse with 5points in canvas

I am not so good in Mathematics. I have a requirement to draw an ellipse using 5 coordinates where user will click on 5 different position in a canvas and getting that clicked coordinate 1 ellipse will drawn. To draw ellipse in canvas I have the method 

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);

Where I need the center position and 2radius of the ellipse. I only have 5coordinates of the perimeter of the ellipse. I get a matrics formula to calculate the ellipse. 

ax2+bxy+cy2+dx+ey+f=0

I am unable to convert that equation to js. I am thankful to you if you please help me out to calculate the mazor and minor radius and center point of ellipse from 5 arbitary points

Upvotes: 0

Views: 612

Answers (1)

MBo
MBo

Reputation: 80187

Having 5 points, you can find general formula of conic section (here ellipse) expanding determinant of this matrix (substitute xi,yi with your point coordinates):

enter image description here

(picture taken here)

Simple example to begin with

Using my answer for inverse problem 

//calc implicit ellipse equation
//semiaxes rx, ry; rotated at fi radians; centered at (cx,cy)
//note: implicit form Ax^2+Bxy+Cy^2+Dx+Ey+F=0 (not 2B,2D,2E)

// in Pascal notation Sqr is squared
B := Sin(2 * Fi) * (ry * ry - rx * rx);
A := Sqr(ry * Cos(fi)) + Sqr(rx * Sin(fi));
C := Sqr(rx * Cos(fi)) + Sqr(ry * Sin(fi));
D := -B * cy - 2 * A * cx;
E := -2 * C * cy - B * cx;
F := C * cy * cy + A * cx * cx + B * cx * cy - rx * rx * ry * ry;

we can see that

Fi = 0.5 * atan2(B, A-C)

then

ry^2+rx^2 = A + C
ry^2-rx^2 = B / Sin(2*Fi)

so

ry = Sqrt((A + C + B / Sin(2*Fi))/2)
rx = Sqrt((A + C - B / Sin(2*Fi))/2)

(except for Fi=0 case, where we can extract semiaxes from A and C directly)

and then find cx, cy from D/E equation system

Also look at Wiki formulas for the same problem

Upvotes: 1

Related Questions