JSFiddle - React, Tailwind, and code Playground

by Michael Vashevko

JavaScript

// initial data
const c = [0, 0];
const rx = 10;
const ry = 5;
const a = [8, 2]; // q1
const b = [2, 4]; // q1

// four edges of the ellipse
const p = [
    [c[0] + rx, c[1]],
    [c[0], c[1] + ry],
    [c[0] - rx, c[1]],
    [c[0], c[1] - ry]
];

const quart = Math.PI / 2;  // 90 degrees

// angle between the X axis and the start point
const ang_a = Math.atan2(a[1] - c[1], a[0] - c[0]);

// angle between the X axis and the end point
let ang_b = Math.atan2(b[1] - c[1], b[0] - c[0]);
if (ang_b < ang_a) ang_b += quart * 4;

// list of points to compute the bounding box
const list = [a, b];
// begin from the ellipse's edge following the start point
// add the edges to the list until we reach the end point
for (let ang = Math.ceil(ang_a / quart) * quart; ang < ang_b; ang += quart) {
	const pt = Math.round(ang / quart);
    list.push(p[pt % 4]);
}

// collect the x and y coords from the list
const listx = list.map((pt) => pt[0]);
const listy = list.map((pt) => pt[1]);

// find the min and max x and y
const minx = Math.min(...listx);
const miny = Math.min(...listy);
const maxx = Math.max(...listx);
const maxy = Math.max(...listy);

console.log('c:', c, 'a:', a, 'b:', b);
console.log('min:', [minx, miny], 'max:', [maxx, maxy]);