JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gameArea">
<canvas id="canvas" width="640" height="320"></canvas>
</div>

CSS

html, body {width:100%; height:100%; margin:0px;}

#gameArea {width:672px; height:330px; margin:0px auto;}
#canvas {border:1px solid black; margin:10px 0px 0px;}

JavaScript

window.onload = function() {
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var FPS = 50;


var tile = new Image();
tile.src = 'http://img163.imageshack.us/img163/4108/tiley.png';

var dirt = new Image();
dirt.src = 'http://img259.imageshack.us/img259/5210/dirtd.png';


/*
CENTER = 5,5 / 5+5 = 10 / 5-5 = 0
DRAWABLE TILES = ROW:6 COL:6
4 <= <= 16
-6 <= <= 6
*/

var Map = [
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]
];
    
// center = x,y = 5,5
// center = (x+y,x-y) = (10,0)

    for(a=7; a<13; a++) { 
        for(b=-4; b<4; b++) { 
            if ((b&1) != (a&1)) continue;    
            x = (a+b)/2;
            y = (a-b)/2;
            if (Map[x][y] == 1) 
                c.drawImage(dirt, a * 32, b*16 + 96);
            else
                c.drawImage(tile, a * 32, b*16 + 96);
        }            
    }
    c.fillStyle = 'rgba(0,0,0,0.5)';
    c.fillRect(256,48,160,112);
    
//for(a=4;a<16;a++) {
//    for(b=-6;b<6;b++) {
        // SKIPS EVERY OTHER TILE, INCLUDING WHAT I WANT TO DRAW.
        // if ((b&1) != (a&1)) continue;
        
        // x = (a-b)*32;
        //x += canvas.width / 2 - 32;
        
        // y = (a+b)*16;
        //y -= 16;
        
        // c.drawImage(tile, a * 10, b * 10);
        
        // if(Map[x][y] == 1) {
        // c.drawImage(dirt, a * 10, b * 10);
        // }
//    }
//}
}