I'm having a hard time drawing an OBB. Here is the code:
window.onload = function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
centro = {
x: Math.random() * 150,
y: Math.random() * 150
},
angulo = Math.floor(Math.random() * 361),
vetorU = {
x: Math.cos(angulo),
y: Math.sin(angulo)
},
vetorV = {
x: -vetorU.y, //cos(angulo + 90),
y: vetorU.x//sin(angulo + 90)
};
vetorU.x = vetorU.x * width/12 + centro.x,
vetorU.y = vetorU.y * width/12 + centro.y,
vetorV.x = vetorV.x * height/12 + centro.x,
context.moveTo(vetorU.x + vetorV.x, vetorU.y + vetorV.y);
context.lineTo(-vetorU.x + vetorV.x, -vetorU.y + vetorV.y);
context.lineTo(-vetorU.x + (-vetorV.x), -vetorU.y + (-vetorV.y));
context.lineTo(vetorU.x + (-vetorV.x), vetorU.y + (-vetorV.y));
context.lineTo(vetorU.x + vetorV.x, vetorU.y + vetorV.y);
context.stroke();
};
<canvas id="canvas" width="200" height="100"></canvas>