An axis-aligned bounding box (AABB) of a rotated ellipse

by Ed Kolosovsky

HTML

<svg width='700' height='700'>
  <ellipse fill='red'></ellipse>
  <rect stroke='black' stroke-width='1' fill='transparent'></rect>
</svg>

JavaScript

let centerX = 350;
let centerY = 100;
let radiusX = 100;
let radiusY = 50;
let degrees = 200;

let radians = degrees * (Math.PI / 180);
let radians90 = radians + Math.PI / 2;
let ux = radiusX * Math.cos(radians);
let uy = radiusX * Math.sin(radians);
let vx = radiusY * Math.cos(radians90);
let vy = radiusY * Math.sin(radians90);

let width = Math.sqrt(ux * ux + vx * vx) * 2;
let height = Math.sqrt(uy * uy + vy * vy) * 2;
let x = centerX - (width / 2);
let y = centerY - (height / 2);

$('ellipse').attr({
  cx: centerX,
  cy: centerY,
  rx: radiusX,
  ry: radiusY,
  transform: `rotate(${degrees} ${centerX} ${centerY})`
});

$('rect').attr({
  x: x,
  y: y,
  width: width,
  height: height,
});