Falling blocks v2

With this code, the falling blocks start from underneath and is only created if needed.

by John kuoppala

HTML

<canvas id="myCanvas" width="400" height="300"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

/*
Continuation from last try
http://jsfiddle.net/Niddro/L78zu4Ld/
This version loop through less objects and only create them if they're dropping
*/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var gridSize = 50;
var index = new Array();
var snapshot;
draw();
createIndex();
var blocks = new Array();

function block(x,y,w,img) {
    this.x = x;
    this.y = y;
    this.clipX = x;
    this.clipY = y
    this.w = w; //width a.k.a gridSize
    this.img = new Image();
    this.img.src = img;
}

function createIndex () {
    snapshot = c.toDataURL();
    var cols = Math.ceil(c.width/gridSize);
    var rows = Math.ceil(c.height/gridSize);
    for(var i = 0; i < cols; i++) {
         index[i] = rows;
    }
}



(function update() {
    for (var i = 0; i < index.length; i++) {
        if (Math.random()*100>92 && index[i]>0) {
            blocks[blocks.length] = new block(i*gridSize, (index[i]-1)*gridSize, gridSize,snapshot);
            index[i]--;
        }
    }
    ctx.fillStyle="#000000";
    for (var i = 0; i < blocks.length; i++) {
        ctx.fillRect(blocks[i].x,blocks[i].y,gridSize,gridSize);
        blocks[i].y+=10;
        ctx.drawImage(blocks[i].img,
                      blocks[i].clipX, blocks[i].clipY,
                      blocks[i].w, blocks[i].w,
                      blocks[i].x, blocks[i].y,
                      blocks[i].w, blocks[i].w);
        if (blocks.y > c.height) {
            blocks.splice(i,1);
            i--;
        }
    }
    requestAnimationFrame(update)
})();


function draw() {
    //drawing some random stuff
    ctx.fillStyle="#FFE4B5";
    ctx.fillRect(0,0,c.width,c.height);
    ctx.fillStyle="#FF0000";
    ctx.strokeStyle="#000000";
    ctx.fillRect(20,50,100,150);
    ctx.strokeRect(20,50,100,150);
    ctx.fillStyle="#00FF00";
    ctx.strokeStyle="#000000";
    ctx.fillRect(100,150,250,150);
    ctx.strokeRect(100,150,250,150);
    ctx.fillStyle="#0000FF";
    ctx.strokeStyle="#000000";
   ...