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">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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;
}

// JQuery load
$(document).ready(function() {

	// 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>

</head>
<body>

<svg id="canvas" onload="startup(evt)" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
	<line id="line1" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line2" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line3" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line4" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
</svg>

</body>
</html> 
Thanks in advance