JSFiddle - React, Tailwind, and code Playground

by gfosco

HTML

<center>
    <h2>Canvas test</h2><br>
    <input type=button onClick="drawmap();" value="Draw"/><BR>
    <canvas id="drawingSurface" width=400 height=300></canvas>
</center>
<div id="loading">
    <img id="tile0" src="http://fosco.com/canvas/images/tile0.png" />
    <img id="tile1" src="http://fosco.com/canvas/images/tile1.png" />
</div>

CSS

BODY {
    margin:0px;
    padding:0px;
    font-family:sans-serif;
    color:black;
}

#drawingSurface {
    border:1px solid black;
    cursor: crosshair;
}

#loading {
    display:none;
}

JavaScript

var canvas;
var context;
var tile = [];

function drawmap() {

    canvas = document.getElementById("drawingSurface");
    context = canvas.getContext("2d");

    tile[0] = document.getElementById("tile0");
    tile[1] = document.getElementById("tile1");

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

    for (var x = 0; x < tileMap.length; x++) {
        for (var j = tileMap[x].length - 1; j >= 0; j--) {
            var drawtile = tile[tileMap[x][j]];
            context.drawImage(drawtile, (j * 32) + (x * 32) + 40, (x * 16) - (j * 16) + 150);
        }
    }

}