Isometric Block Map

by Tgwizman

HTML

<canvas></canvas>

CSS

canvas {
    background-color: #AAF;
}

JavaScript

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.style.margin = 0;
document.body.style.padding = 0;

var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'http://f.cl.ly/items/303w0y0r3I2i012g1X3m/terrain.png';

var scale = 0.5;
var xOffset = 0;
var yOffset = 0;
var map = [
    [
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1],
        ],
    [
        [],
        [],
        [],
        [0,0,1],
        [0,0,2],
        [0,0,3],
        [0,0,4],
        [0,0,5],
        [0,0,7],
        [],
        [0,0,0,0,0,0,0,3],
        ],
    [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [0,0,0,0,0,0,0,3],
        ],
    [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [0,0,0,0,0,0,0,3],
        ],
    [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,3,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        ],
    [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,3,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        [0,0,0,0,0,4,4,4,4,4],
        ],
    [
        [],
        [],
        [],
        [],
        [],
   ...