javascript - 長方形を追加して回転させる

Question

タグ内にランダムな四角形を生成し、その起点内で各四角形を回転させるプログラムを作成しようとしています。開始ボタンをもう一度押すと、キャンバスがクリアされて新しい一連の四角形が描画され、回転します。

私のプログラム全体を貼り付けるのは恐ろしく見えるので、私が重要だと思うものを投稿します：

配列を作成し、いくつかの値を初期化します:

var rectArrayStartX,rectArrayStartY,rectArrayDimY,   rectArrayDimX;

function start()
{
   if (i >= 1){
  canvas.restore()
  i--;
}
construct();
window.setInterval( "rotateShape()", 500 );

}

function construct()
{

if ( i < 1) {
  canvas.save();
  i++
}
var canvas = document.getElementById("gameId");
var context = canvas.getContext("2d");
var k,m;

var points = parseInt(pGame.box.value);
rectArrayStartX[100];
rectArrayStartY[100];
rectArrayDimY[100];
rectArrayDimX[100];

コードは続きますが、このビットは私にこのエラーを与えます: Uncaught TypeError: Cannot read property '100' of undefined

各ポイント、原点 x と y + 幅と高さの配列を作成しようとしています。次に、fillRect ill を使用して配列値を渡し、長方形を描画します。

2 番目のビットに問題があるのは、それらを回転させることです。次の関数を使用しています。

 function rotateShape()
 {
  var randomAngle;
  randomAngle = Math.random() * 5 ;
        if (randomAngle>3.14)
        {
              randomAngle=3.14
        }
 //context.translate(canvas.width / 2, canvas.height / 2);
  context.rotate(randomAngle);


 }

次の関数で呼び出していますが、何もしませんが、後で各四角形の原点を見つけて正しい方法で回転させる必要がありますが、今のところ、関数が機能することを確認したいだけです:

 function start()
 {
   if (i >= 1){
   canvas.restore()
   i--;
 }
 construct();
  window.setInterval( "rotateShape()", 500 );

 }

コード全体を修正すると簡単になる場合は、それを提供するようにお知らせください。お時間をいただきありがとうございます。長いトピックで申し訳ありません。