Falling blocks, v1

The thought was to have like a game over animation where the screen kind of falls apart in blocks.

by John kuoppala

HTML

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

CSS

canvas {
    border: 1px solid black;
}

JavaScript

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

var gridSize = 50;
var blocks = new Array(); 
draw();
makeBlocks();
setTimeout(drawBlocks,5000);

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;
    this.falling=false;
}

function makeBlocks() {
    var dataURL;
    dataURL = c.toDataURL();
   //creating the blocks
    for (var i = 0; i < Math.ceil(c.width/gridSize); i++) {
        blocks[i] = new Array();
        for (var j = 0; j < Math.ceil(c.height/gridSize); j++) {
             blocks[i][j] = new block(i*gridSize,j*gridSize,gridSize,dataURL);
        }
    } 
}

function updateBlocks() {
    for (var i = 0; i < Math.ceil(c.width/gridSize); i++) {
        for (var j = 0; j < Math.ceil(c.height/gridSize); j++) {
            if (blocks[i][j].falling) {
                blocks[i][j].y+=2;
            }
        }
    }
}

// Drawing the blocks, mainly to see that it worked
function drawBlocks() {
    ctx.fillStyle="#000000";
    ctx.fillRect(0,0,c.width,c.height);
    for (var i = 0; i < Math.ceil(c.width/gridSize); i++) {
        for (var j = 0; j < Math.ceil(c.height/gridSize); j++) {
            if (!blocks[i][j].falling && Math.random()*100 > 95) {
                blocks[i][j].falling = true;
            }
            ctx.drawImage(blocks[i][j].img,
                      blocks[i][j].clipX, blocks[i][j].clipY,
                      blocks[i][j].w, blocks[i][j].w,
                      blocks[i][j].x, blocks[i][j].y,
                      blocks[i][j].w, blocks[i][j].w);
    
        }
    }
    updateBlocks();
    requestAnimationFrame(drawBlocks);
}

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);
...