Q:

Starting my canvas all over again on a button click

I am currently on the process of writing JavaScript that would randomly generate boxes with the number of boxes inputed in my form box value, and make them rotate etc.
When the JavaScript is loaded, the boxes generated when I hit start() is the default value set in the <input> tag. If I change the value in the script and refresh the new number of boxes appear, else if I change the value withing the browser and click start a gizillion time it would only refresh the canvas but everything stays in its place, in other words, same boxes will appear in the same place even if I reduced or increased their number:
<!DOCTYPE HTML>
<html>
<head><title>Rectangles</title></head>
<body>

<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="20" style="border-style:inset;
             color:red; background-color: black" />
</center>
</form>
<script>

var shouldClear = 0;

This is where I believe all the resetting should be:
  function start()
  {
    //tried making a counter, if its the first time to click save() context
    // else restore
    // context.restore(); but it didnt work, I think its because canvas and context 
    //arent declared here, but if I declare them in this scope or as global variable i get an error saying:Cannot call method 'getContext' of null 

  if (shouldClear<=0) {
   setInterval(rotateShape, 250);
   var degrees = 0.0;
   shouldClear += 1;
 }
if (shouldClear==1){
var canvas = document.getElementById('gameId');

    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
      if (shouldClear==1) {
      ctx.clearRect(0, 0, 640, 480);
      construct();
      //shouldClear= shouldClear - 10;
      }
    }
}

}
 var chooseColor =0;
function construct()
 {

  var RotatingRectangle = function(x, y, width, height, rot, r,g,b){
    var rotation = rot;
    var rotationState = 0;
    this.draw = function(ctx){
      rotationState += rotation;

      ctx.save();
      ctx.translate(x+(width/2), y+(height/2));
      ctx.rotate(rotationState);

      var randomRed = Math.floor( Math.random() * 256 );
  var randomGreen = Math.floor( Math.random() * 256 );
  var randomBlue = Math.floor( Math.random() * 256 );
      ctx.fillStyle = "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")";
      ctx.fillRect(0-(width/2), 0-(height/2), width, height);
      ctx.restore();
    }
  }

   var count = parseInt(pGame.box.value);
    var allShapes = [];
    for (i=0; i < count; ++i) {
     if (chooseColor == 0) {

      var rotation = Math.random()*.10
      var x = Math.floor(Math.random() * 640);
      var y = Math.floor(Math.random() * 480);
      var randomRed = Math.floor( Math.random() * 256 );
    var randomGreen = Math.floor( Math.random() * 256 );
    var randomBlue = Math.floor( Math.random() * 256 );
      var rect = new RotatingRectangle(x, y, 15 + (Math.random() * 50), 15 + (Math.random() * 30), rotation, "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")");
      allShapes.push(rect); 
    }
    }
    chooseColor = 1;

    return allShapes;

}

var allShapes = construct();

 function rotateShape()
{
  var canvas = document.getElementById('gameId');

    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
      if (shouldClear==1) {
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
    }

    }
 }

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

A:

So i found it quicker to refactor your code than to find where the issue was.
It is working fine now, as you can see here :
http://jsfiddle.net/gamealchemist/UW6eZ/
HTML : 
<div id="rectangles" STYLE="background-color: #fff68f; width: 600px; height: 420px; 
           border-style: outset;position: absolute;">
    <form name="pGame">
        <center> <b>Canvas Application</b>

            <canvas id="gameId" width="598" height="300" style="border:1px solid; background-color: #eee68e; ">Your Browser does not support Canvas.</canvas>
            <br/>
            <input type="button" value="Start" onclick="updateShapes()"></input>
            <input id="box" type="text" size="2" value="20" style="border-style:inset;
             color:red; background-color: black"></input>
        </center>
    </form>
</div>

Javascript :
( if using this code outside jsfiddle, be sure to wait the DOM loaded )
// -------------------------------
// canvas and context
var canvas = document.getElementById('gameId');
var ctx = canvas.getContext('2d');

// -------------------------------
//  handle user input

function updateShapes() {
    allShapes = buildShapes(parseInt(pGame.box.value), canvas.width, canvas.height);
}
window.updateShapes = updateShapes;

// -------------------------------
//   Rotating rectangle Class 

function RotatingRectangle(x, y, width, height, rot, color) {
    this.x = x;
    this.y = y;
    this.rotation = rot;
    this.rotationState = 0;
    this.width = width;
    this.height = height;
    this.color = color;
}

RotatingRectangle.prototype.rotate = function () {
    this.rotationState += this.rotation;
};

RotatingRectangle.prototype.draw = function (ctx) {
    ctx.save();
    ctx.translate(this.x + (this.width / 2), this.y + (this.height / 2));
    ctx.rotate(this.rotationState);
    ctx.fillStyle = this.color;
    ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
    ctx.restore();
};

// -------------------------------
// handling a shape collection

// init
var allShapes = null;
updateShapes();

// build a set of random shapes
function buildShapes(count, maxX, maxY) {
    var tmpShapes = [];
    for (i = 0; i < count; ++i) {
        var rotation = 0.02 + Math.random() * .10
        var width = 15 + getRandom(50);
        var height = 15 + getRandom(30);
        var diag = Math.sqrt(width * width, height * height);
        var x = getRandom(maxX);
        var y = getRandom(maxY);
        if (x - diag < 0) x += diag;
        if (x + diag > maxX) x -= diag;
        if (y - diag < 0) y += diag;
        if (y + diag > maxY) y -= diag;
        var color = getRandomColor();
        var rect = new RotatingRectangle(x, y, width, height, rotation, color);
        tmpShapes.push(rect);
    }
    return tmpShapes;
}

// rotate all shapes
function rotateShapes() {
    for (i = 0; i < allShapes.length; i++) {
        allShapes[i].rotate();
    }
}

// draw all shpaes
function drawShapes(ctx) {
    ctx.clearRect(0, 0, 640, 480);
    for (i = 0; i < allShapes.length; i++) {
        allShapes[i].draw(ctx);
    }
}

// animate
polyFillRAFNow();

function animate() {
    requestAnimationFrame(animate);
    rotateShapes();
    drawShapes(ctx);
};

animate();

// -------------------------------
//   Helpers 

function getRandom(maxInt) {
    return 0 | Math.random() * maxInt;
}

function getRandomColor() {
    var color = 'rgb(' + getRandom(256) + ',' + getRandom(256) + ',' + getRandom(256) + ')';
    return normalizeColor(color);
}

function normalizeColor(colorString) {
    ctx.fillStyle = colorString;
    return ctx.fillStyle;
}

// requestAnimationFrame polyfill
function polyFillRAFNow() {
    var w = window,
        foundRequestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || function (cb) {
            setTimeout(cb, 1000 / 60);
        };
    window.requestAnimationFrame = foundRequestAnimationFrame;
}

