JSFiddle - React, Tailwind, and code Playground

by darthdeus

HTML

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

JavaScript

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

var BOX_SIZE = 20;
var MAP_W = 10;
var MAP_H = 10;

function drawBox(color, x, y, w, h) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w || BOX_SIZE, h || BOX_SIZE);
}

var map = [
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,1,1,1,0,0,0,0,
  0,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,0,0,0,0,
  1,1,1,1,1,0,1,1,1,1,
  1,1,1,1,1,0,1,1,1,1,  
];

function drawMap() {
  
for (var i = 0; i < MAP_H; i++) {
  for (var j = 0; j < MAP_W; j++) {
    var color = map[i * MAP_W + j] ? "#5d995d" : "lightblue";
    drawBox(color, BOX_SIZE * j, BOX_SIZE * i);
  }
}

}

drawMap();

drawBox("#612b2e", 0, 5 * BOX_SIZE);