i'm supposed to write a program to generate a certain number of random rectangles and make each rectangle rotate in its position,
however what I got was random rects generated randomly over each other with a certain rotation for each..

if click on the start button the previous rects should clear out and a new bunch should appear .. but sadly I couldnt achieve that .. I even tried to bound the generation of rects to my canvas size, but also that didnt work -.- ..

hope for some help..

this is my code (I dont like to paste my entire code, but this will give any helper a clear idea of my issue):

Code:
<!DOCTYPE HTML>
<html>
<head><title>Rectangles</title></head>
<body>
<script>

 var i = 0;
 var rectArrayStartX,rectArrayStartY,rectArrayDimY,   rectArrayDimX;
 var canvas;
   var context;
function start()
{
   //tried making a counter, if its the first time to click
   //start then do nothing else restore
  // context.restore();
  
   if (i>0) {
      context.restore();
      context.clearRect(0,0,canvas.width,canvas.height)
      i--;
   }
   else
   i++;
   construct();
   window.setInterval( "rotateShape()", 50 );
   
}

function construct()
{
  //here i said if its the first time running, then save,
  //else do nothing, but it wouldnt show anything on my screen.
   
  
   canvas = document.getElementById("gameId");
   context = canvas.getContext("2d");
   var k,m;
   context.save();
   var points = parseInt(pGame.box.value);
   //rectArrayStartX[100];
   //rectArrayStartY[100];
   //rectArrayDimY[100];
   //rectArrayDimX[100];
   var rand = 0;
   var randomWidth,randomHeight,randomX,randomY;
            
   var i = 0;
            
   var randomAngle;
   randomAngle = Math.random() * 5 ;
   if (randomAngle>3.14)
   {
      randomAngle=3.14
   }
   
   //context.translate(canvas.width,canvas.height);
   context.rotate(randomAngle);
   
   for(;i<points;i++){
               
      randomX = Math.random()*canvas.height;
      randomY= Math.random()*canvas.width;
      //rectArrayStartX[i]=randomX;
      //rectArrayStartY[i]=randomY;
      randomWidth = (Math.floor( 3 + Math.random() * 6 )*10);
      if (randomX+randomWidth>canvas.width) {
         randomX = 0;
      }
      randomHeight = ( 1.5 + Math.random() * 6 )*10;
      if (randomY+randomHeight>canvas.height) {
         randomY = 0;
      }
             
         if (randomHeight>60)
               randomHeight=60;
      //rectArrayDimX[i]=randomWidth;
      //rectArrayDimY[i]=randomHeight;
            
      randomRed = Math.floor( Math.random() * 256 );
      randomGreen = Math.floor( Math.random() * 256 );
      randomBlue = Math.floor( Math.random() * 256 );
	    
        
   
      context.strokeStyle="gold";
      context.fillStyle='rgba('+randomRed+','+ randomGreen+','+randomBlue+',1)';
      context.fillRect(randomX,randomY,randomWidth,randomHeight);
      context.lineWidth=1;
      context.strokeRect(randomX,randomY,randomWidth,randomHeight);
                

            }
}

function rotateShape()
{
  //window.setInterval(canvas,30);
   var randomAngle;
   randomAngle = Math.random() * 5 ;
            if (randomAngle>3.14)
            {
                  randomAngle=3.14
            }
   context.translate(canvas.width / 2, canvas.height / 2);
   context.rotate(randomAngle);
   window.clearInterval("gameId");
   construct();
   

}

</script>
<div id="rectangles" STYLE = "background-color: #fff68f; width: 600px; height: 420px; 
               border-style: outset;position: absolute;">
<form name="pGame">
<center>
   <b>Canvas Application</b><br>
   <input type= "button" value= "Start" onclick= "start()" />
   <input id="box" type="text" size="2" value="10" style="border-style:inset;
                 color:red; background-color: black" />
</center>
</form>

<canvas id="gameId" width="598" height="300" 
     STYLE = "border:1px solid; background-color: #fff68f; position: absolute;">
</canvas>
<div style="font-size:12; position: relative; text-align: center; top: 320px;">
Copyright &copy; 2005 <span style="font-family: cursive;">do it@knowHow</span></div>
</div>
</body>
</html>