var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#e00";
document.querySelector("input").addEventListener("change", update);

function update() {

// Test rect: 50,25 - 350, 175, center: 200,200, W: 300, H: 150

// generate x1,y1 - x3,y3 known points so we have something to work with:
var value = typeof this.value !== "undefined" ? +this.value : 30,
    angle = value * Math.PI / 180,
    x1 = Math.cos(angle) * (50-200) - Math.sin(angle) * (275-200) + 200,
    y1 = Math.sin(angle) * (50-200) + Math.cos(angle) * (275-200) + 200,
    x3 = Math.cos(angle) * (350-200) - Math.sin(angle) * (125-200) + 200,
    y3 = Math.sin(angle) * (350-200) + Math.cos(angle) * (125-200) + 200;

// Initial Visuals: rotated rect, known corner points
ctx.clearRect(0,0,400,400);
ctx.strokeStyle = "#000";
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.strokeRect(50, 125, 300, 150);
ctx.setTransform(1,0,0,1,0,0);

ctx.fillStyle = "#e00";
ctx.fillRect(x1-2, y1-2, 4, 4); ctx.fillText("x1,y1", x1+5, y1);
ctx.fillRect(x3-2, y3-2, 4, 4); ctx.fillText("x3,y3", x3+5, y3);

// Step 1: find center point (origin)
var mx = x1 + (x3 - x1) * 0.5,
    my = y1 + (y3 - y1) * 0.5;

ctx.fillRect(mx-2, my-2, 4, 4);   // draw center point

// unrotate known points (negative angle)
var x1u = Math.cos(-angle) * (x1-mx) - Math.sin(-angle) * (y1-my) + mx,
    y1u = Math.sin(-angle) * (x1-mx) + Math.cos(-angle) * (y1-my) + my,
    x3u = Math.cos(-angle) * (x3-mx) - Math.sin(-angle) * (y3-my) + mx,
    y3u = Math.sin(-angle) * (x3-mx) + Math.cos(-angle) * (y3-my) + my;

ctx.fillStyle = "#00c";
ctx.fillRect(x1u-2, y1u-2, 4, 4); ctx.fillText("x1u,y1u", x1u+5, y1u-5);
ctx.fillRect(x3u-2, y3u-2, 4, 4); ctx.fillText("x3u,y3u", x3u+5, y3u);

// To get width and height:
var width = Math.abs(x3u - x1u),
    height = Math.abs(y3u - y1u);

ctx.fillText("Size: " + ((width+0.5)|0) + " x " + ((height+0.5)|0), 0, 10);
  
// Mix known coordinates 
var x2u = x1u, y2u = y3u,
    x4u = x3u, y4u = y1u;

// show unrotated points
ctx.fillStyle = "#0c0";
ctx.fillRect(x2u-2, y2u-2, 4, 4); ctx.fillText("x2u,y2u", x2u+5, y2u-5);
ctx.fillRect(x4u-2, y4u-2, 4, 4); ctx.fillText("x4u,y4u", x4u+5, y4u);

// draw lines between unrotated points to show we have an actual rectangle
ctx.strokeStyle = "#777"; ctx.beginPath();
ctx.moveTo(x1u, y1u); ctx.lineTo(x2u, y2u);
ctx.lineTo(x3u, y3u); ctx.lineTo(x4u, y4u);
ctx.closePath(); ctx.stroke();

// rotate new points using angle
var x2 = Math.cos(angle) * (x2u-mx) - Math.sin(angle) * (y2u-my) + mx,
    y2 = Math.sin(angle) * (x2u-mx) + Math.cos(angle) * (y2u-my) + my,
    x4 = Math.cos(angle) * (x4u-mx) - Math.sin(angle) * (y4u-my) + mx,
    y4 = Math.sin(angle) * (x4u-mx) + Math.cos(angle) * (y4u-my) + my;

// show new coordinates
ctx.fillStyle = "#f0f";
ctx.fillRect(x2-2, y2-2, 4, 4); ctx.fillText("x2,y2", x2+5, y2);
ctx.fillRect(x4-2, y4-2, 4, 4); ctx.fillText("x4,y4", x4+5, y4);
}
update();

<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
Angle: <input type=range min=0 max=360 value=30><br><canvas width=400 height=400></canvas>