JavaScript
function drawRect(context, x1,y1, x2,y2, x3,y3, x4,y4) {
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.lineTo(x4,y4);
context.lineTo(x1,y1);
context.stroke();
}
function drawRotated(context, x1,y1, x2,y2, x3,y3, x4,y4, degrees) {
var angle = degrees * Math.PI/180,
cosa = Math.cos(angle),
sina = Math.sin(angle),
w = (x2-x1), h = (y3-y1),
w2 = w/2, h2= h/2,
mw2 = -w2, mh2= -h2,
xo = x1 + w2, yo = y1 + h2,
tx1 = mw2*cosa, ty1 = mh2*sina,
tx2 = mw2*sina, ty2 = mh2*cosa,
tx3 = w2*cosa, ty3 = h2*sina,
tx4 = w2*sina, ty4 = h2*cosa,
nx1 = tx1 - ty1 + xo,
ny1 = tx2 + ty2 + yo,
nx2 = tx3 - ty1 + xo,
ny2 = tx4 + ty2 + yo,
nx3 = tx3 - ty3 + xo,
ny3 = tx4 + ty4 + yo;
nx4 = tx1 - ty3 + xo,
ny4 = tx2 + ty4 + yo;
// draw, for convenience
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,v3,v4) {
return Math.min(Math.min(v1,v2),Math.min(v3,v4));
},
max = function(v1,v2,v3,v4) {
return Math.max(Math.max(v1,v2),Math.max(v3,v4));
},
minx = min(nx1,nx2,nx3,nx4),
miny = min(ny1,ny2,ny3,ny4),
maxx = max(nx1,nx2,nx3,nx4),
maxy = max(ny1,ny2,ny3,ny4);
// draw, again just for convenience
context.moveTo(minx,miny);
context.lineTo(minx,maxy);
context.lineTo(maxx,maxy);
context.lineTo(maxx,miny);
context.lineTo(minx,miny);
context.stroke();
}
// =============
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width =...