JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

body {
    background: #10053d;
}
canvas {
    border: 2px solid #f13574;
    background: #513574;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

JavaScript

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

var border = 5, // set grid details
    spaceWidth = 80,
    spaceAmount = 5;

var $levelArray = [
    ["blue", 0, 0, "blue", "blue"],
    [0, "gray", 0, 0, 0],
    ["blue", "blue", "green", 0, "blue"],
    ["blue", 0, "yellow", 0, 0],
    [0, 0, 0, "gray", 0],
    ["red", 0, 0, 0, 0]
];

canvas.width = (spaceWidth * spaceAmount) + (5 * spaceAmount) + 5; // and here's the canvas size
canvas.height = (spaceWidth * spaceAmount) + (5 * spaceAmount) + 5;

// make a rounded corner square; using a sizing hack to make sure that strokes don't effect the full size of the item
function square(originX, originY, size, corner, fill) {
    var startFromX = originX + (corner / 2);
    var startFromY = originY + (corner / 2);
    var extentsX = startFromX + (size - corner);
    var extentsY = startFromY + (size - corner);
    context.lineJoin = "round";
    context.lineWidth = corner;
    context.fillStyle = "#513574";
    context.strokeStyle = fill;

    context.beginPath();
    context.moveTo(startFromX, startFromY);
    context.lineTo(startFromX, extentsY);
    context.lineTo(extentsX, extentsY);
    context.lineTo(extentsX, startFromY);
    context.closePath();
    context.stroke();
    context.fill();
}

// build a grid of said squares
function squareGrid(spacing, size, corner, color, amount) {
    for (var x = 0; x < amount; x++) {
        // build rows
        for (var y = 0; y < amount; y++) {
            // build column spacing in each row
            square(5 + (size * x) + (spacing * x), 5 + (size * y) + (spacing * y), size, corner, color);
            // build each square
        }
    };
};

// actually parse the arguments for said square
squareGrid(border, spaceWidth, (border * 2), "#f13574", spaceAmount);

// create a tiled image
function makeTile(tile, horizontalPosition, verticalPosition) {
    switch (tile) {
        case "blue":
            context.fillStyle = "#00F";
     ...