Drag the handles to reshape the rectangle
Drag the width handle to resize & rotate; drag the
height handle to set the height. By computing the corners with
cos/sin instead of rect(), the shape stays a true polygon you can
rotate and run collision detection against.
Why know this? ctx.rect() can only draw an
axis-aligned box — it can't rotate, and it gives you no actual corner points.
The moment you want a tilted card, a swinging platform, a rotating hitbox, or
any shape you can test for collisions, you need the four corners as real
coordinates. Computing them from width, height, and angle is the same trick
that powers sprite rotation and oriented bounding-box (OBB) collision — learn
it once and rotated rectangles stop being scary.