Javascript Tile Maps

Question

I'm trying to make a tile map for my game so I don't have to draw every single tile individually (like what I did just for testing purposes). I have followed just about every tutorial I could find for hours. Could someon tell me whats wrong with my code? Just to be clear, I'm trying to make something like this.

If anyone could help, that would be great. Heres my code:

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 500,
    player = {
        x: width / 2,
        y: height /2,
        width: 48,
        height: 64,
        speed: 3,
        velX: 0,
        velY: 0,
        jumping: false,
        grounded: false
    },
    keys = [],
    friction = 0.8,
    gravity = 0.3;
    playerimage = new Image();
    playerimage.src = "http://i.imgur.com/iAsPYrz.png";
    grassimage = new Image();
    grassimage.src = "http://i.imgur.com/2VQp0FO.png";

var grassblocks = [];

// dimensions
grassblocks.push({
    x: 0,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32,
    y: height - 32,
    width: 32,
    height: 32
});

grassblocks.push({
    x:32*2,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*2,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*3,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*4,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*5,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*6,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*7,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*8,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*9,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*10,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*11,
    y: height - 32,
    width: 32,
    height: 32
});

canvas.width = width;
canvas.height = height;

function update() {
    // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping && player.grounded) {
            player.jumping = true;
            player.grounded = false;
            player.velY = -player.speed * 2;
        }
    }
    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {
            player.velX++;
        }
    }
    if (keys[37]) {
        // left arrow
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }

    player.velX *= friction;
    player.velY += gravity;

    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "black";
    ctx.beginPath();
    
    player.grounded = false;
    for (var i = 0; i < grassblocks.length; i++) {
        ctx.drawImage(grassimage,grassblocks[i].x, grassblocks[i].y, grassblocks[i].width, grassblocks[i].height);
        
        var dir = colCheck(player, grassblocks[i]);

        if (dir === "l" || dir === "r") {
            player.velX = 0;
            player.jumping = false;
        } else if (dir === "b") {
            player.grounded = true;
            player.jumping = false;
        } else if (dir === "t") {
            player.velY *= -1;
        }

    }
    
    if(player.grounded){
         player.velY = 0;
    }
    
    player.x += player.velX;
    player.y += player.velY;

    ctx.fill();
    ctx.fillStyle = "green";
    //ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.drawImage(playerimage,player.x,player.y,player.width,player.height);

    requestAnimationFrame(update);
}

function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2),
        colDir = null;

    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = hWidths - Math.abs(vX),
            oY = hHeights - Math.abs(vY);
        if (oX >= oY) {
            if (vY > 0) {
                colDir = "t";
                shapeA.y += oY;
            } else {
                colDir = "b";
                shapeA.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
            } else {
                colDir = "r";
                shapeA.x -= oX;
            }
        }
    }
    return colDir;
}

var mapArray = [
    [0, 0, 0, 0 ,0],
    [0, 1, 0, 0 ,0],
    [0, 0, 0, 0 ,0],
    [0, 0, 0, 0 ,0],
    [0, 0, 1, 1 ,0]
];

var posX = 0;
var posY = 0;
   
    for (var i = 0; i < mapArray.length; i++) {
        for (var j = 0; j < mapArray[i].length; j++) {
            if (mapArray[i][j] == 0) {
                ctx.drawImage(grassimage,posX,posY,32,32);
            }
            if (mapArray[i][j] == 1) {
                ctx.drawImage(playerimage,posX,posY,32,32);
            }
            posX+=32;
        }
        posY+=32;
        posX = 0;
    }   




document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});


window.addEventListener("load", function () {
    update();
});

<head>
    <title>Platformer Game</title>
</head>
<body>
  <h3>Arrow keys to move, and space or up arrow to jump</h3>
    <canvas id="canvas"></canvas>
    <style>
    canvas {
    border:1px solid #d3d3d3;
    background-color: rgb(205,255,255);
    }
    </style>
</body>