JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

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

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

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

var imageCount = 2;
var grass = new Image();
grass.onload = start;
var dirt = new Image();
dirt.onload = start;
grass.src = 'https://dl.dropboxusercontent.com/u/139992952/multple/grass.png';
dirt.src = 'https://dl.dropboxusercontent.com/u/139992952/multple/sand.png';

function start() {

    if (--imageCount > 0) {
        return;
    }

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

    var posX = 0;
    var posY = 0;

    for (i = 0; i < map_array.length; i++) {
        for (j = 0; j < map_array[i].length; j++) {
            if (map_array[i][j] == 0) {
                context.drawImage(grass, posX, posY, 25, 25);
            }
            if (map_array[i][j] == 1) {
                context.drawImage(dirt, posX, posY, 25, 25);
            }
            posX += 25;
        }
        posX = 0;
        posY += 25;
    }
}