Posted on Aug 5

How to Find the Center of a Rotated Rectangle

#geometry #frontend #javascript #typescript

So you're given this weird case:

You know the top-left corner (x, y) of a rotated rectangle, along with its width w, height h, and rotation angle rotation.
The question is: how do you find the center of that rotated rectangle?

At first glance, this looks like a total brain-buster.

But here's a little trick:
Think backwards.

🤯 Flip Your Perspective

Imagine the rectangle before it was rotated.
It was perfectly upright, right?

So you had a regular rectangle sitting at (x, y), and then it got rotated around its top-left corner by some angle.

Now ask yourself:

Where would the center of the original rectangle have moved to after that rotation?

Exactly — if we can figure out where the original center ended up, that's our answer.

📐 So What's the Original Center?

If we treat (x, y) as the origin (0,0), then the upright rectangle’s center is just:

(dx, dy) = (w / 2, h / 2)

Now we rotate that point around the origin using basic 2D rotation formulas:

rotatedX = dx * cos(θ) - dy * sin(θ) rotatedY = dx * sin(θ) + dy * cos(θ)

Then we shift everything back by adding x and y to those results.

✅ Final Formula

So the rotated center becomes:

{ x: x + dx * cos(θ) - dy * sin(θ), y: y + dx * sin(θ) + dy * cos(θ) }

Where θ is the angle in radians.

🧪 Full Working Code

function getRotatedRectCenter( x: number, y: number, w: number, h: number, angle: number // in degrees ) { const dx = w / 2 const dy = h / 2 const radian = (angle * Math.PI) / 180 const cos = Math.cos(radian) const sin = Math.sin(radian) return { x: x + dx * cos - dy * sin, y: y + dx * sin + dy * cos, } }