## Rotating a 2D figure

Hello! This is my first attemp with geometry applied to JavaScript and I'm trying to draw a figure with a given rotation angle in degrees. My draw(deg) function will work just fine if I run it one time, but it will fail to draw the correct figure if I run it more than once...

This is my CODE, I hope you can help me, I'm really lost at this point...

HTML Code:
```<!doctype html>
<html lang="es">
<meta charset="utf-8"/>
<title>123 probando SVG</title>
<style type="text/css">
HTML,BODY {
width:100%;
height:100%;
border: rgba(0,0,0,1);
}

#canvas {
position:absolute;
top:0;
left:0;
border:1px #333333 solid;
}
</style>

<script>

// This is to access the SVG dom
var svgDoc;
function startup(evt){
svgDoc=evt.target.ownerDocument;
}

// Draw my figure rotated in 45 deg
draw(45);

});

// #1 - I define a rectangle with it's 4 points
var matriz = Array({x:250,y:150},{x:250,y:250},{x:450,y:250},{x:450,y:150});

// #2 - Draws the figure in a given rotation angle
function draw(deg) {

// This is the CENTER point of my figure (with 250 x 150 y adjust)
var Ox = 250 + ((450 - 250) / 2);
var Oy = 150 + ((250 - 150) / 2);

var angle = 0;
var r=150;		// Relative to the size of my rectangle...

/ Cycles around my 4 points
for (var i=0; i<4; i++) {

// Use ATAN2 to calculate the starting angle of this point of my figure
// Converted to degrees.. I know it's not necesary, this is just a demo for now :)
angle = Math.atan2(matriz[i].y - Oy, matriz[i].x - Ox) * 180 / Math.PI;

// Calculate the coordinates for the rotated point (and again, adjust x and y for 250 and 150)
matriz[i].x = 250 + r * Math.sin((deg + angulo) * Math.PI / 180);
matriz[i].y = 150 - r * Math.cos((deg + angulo) * Math.PI / 180);
}

// This will actually draw the lines of my figure
drawLines();
}

// #3 - Funcion para dibujar las lineas de mi figura rectangular
function drawLines() {
var line = document.getElementById("line1");
line.setAttribute("x1", matriz[0].x);
line.setAttribute("y1", matriz[0].y);
line.setAttribute("x2", matriz[1].x);
line.setAttribute("y2", matriz[1].y);

line = document.getElementById("line2");
line.setAttribute("x1", matriz[1].x);
line.setAttribute("y1", matriz[1].y);
line.setAttribute("x2", matriz[2].x);
line.setAttribute("y2", matriz[2].y);

line = document.getElementById("line3");
line.setAttribute("x1", matriz[2].x);
line.setAttribute("y1", matriz[2].y);
line.setAttribute("x2", matriz[3].x);
line.setAttribute("y2", matriz[3].y);

line = document.getElementById("line4");
line.setAttribute("x1", matriz[3].x);
line.setAttribute("y1", matriz[3].y);
line.setAttribute("x2", matriz[0].x);
line.setAttribute("y2", matriz[0].y);
}

</script>