JSFiddle - React, Tailwind, and code Playground

JavaScript

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext("2d");

var x=100, y=100, w=100, h=150,
    x1=x, y1=y,
    x2=x+w, y2=y,
    x3=x+w, y3=y+h,
    x4=x, y4=y+h;

context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.lineTo(x4,y4);
context.lineTo(x1,y1);
context.stroke();

// let's manually rotate

var angle = Math.PI/9;
var cos = function(v) { return Math.cos(v); };
var sin = function(v) { return Math.sin(v); };

var nx1 = (-w/2)*cos(angle) - (-h/2)*sin(angle) + (x+w/2),
    ny1 = (-w/2)*sin(angle) + (-h/2)*cos(angle) + (y+h/2),
    
    nx2 = (w/2)*cos(angle) - (-h/2)*sin(angle) + (x+w/2),
    ny2 = (w/2)*sin(angle) + (-h/2)*cos(angle) + (y+h/2);

    nx3 = (w/2)*cos(angle) - (h/2)*sin(angle) + (x+w/2),
    ny3 = (w/2)*sin(angle) + (h/2)*cos(angle) + (y+h/2);

    nx4 = (-w/2)*cos(angle) - (h/2)*sin(angle) + (x+w/2),
    ny4 = (-w/2)*sin(angle) + (h/2)*cos(angle) + (y+h/2);

context.moveTo(nx1,ny1);
context.lineTo(nx2,ny2);
context.lineTo(nx3,ny3);
context.lineTo(nx4,ny4);
context.lineTo(nx1,ny1);
context.stroke();

// new bounding box = min(nx1,nx2,nx3,nx4)/min(ny1,ny2,ny3,ny4)
// to max(nx1,nx2,nx3,nx4)/max(ny1,ny2,ny3,ny4)

var min = function(v1,v2) { return Math.min(v1,v2); }
var max = function(v1,v2) { return Math.max(v1,v2); }
var minx = min(min(nx1,nx2),min(nx3,nx4)),
    miny = min(min(ny1,ny2),min(ny3,ny4)),
    maxx = max(max(nx1,nx2),max(nx3,nx4)),
    maxy = max(max(ny1,ny2),max(ny3,ny4));

context.moveTo(minx,miny);
context.lineTo(minx,maxy);
context.lineTo(maxx,maxy);
context.lineTo(maxx,miny);
context.lineTo(minx,miny);
context.stroke();