JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<canvas id="cvs" width="500px" height="500px"></canvas>

CSS

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

JavaScript

var tilesX = 100;
var tilesY = 100;
var tile = 5;
var map = [];

var canvas = null;
var context = null;

function rand(nb) {
    return (Math.random()*100 >= nb);
}

function drawRect(x, y, color) {
    context.fillStyle = color;
    context.fillRect(x, y, tile, tile);
}

function decodeColor(c) {
    if(c == 'w') return 'skyblue';         // water
    else if(c == '-') return 'sienna';    // earth
    else return 'black';
}

function showMap() {
    for(var i=0; i<map.length; i++) {
        for(var j=0; j<map[i].length; j++) {
            drawRect(j*tile, i*tile, decodeColor(map[i][j]));
        }
    }
    context.fill();
}

function init() {
    canvas = document.getElementById('cvs');
    context = canvas.getContext('2d');
    
    for(var i=0; i<tilesY; i++) {
        var row = [];
        for(var j=0; j<tilesX; j++) {
            
            if(rand(99.5)) row[j] = '-';
            else row[j] = 'w';
            
        }
        map[i] = row;
    }
}

init();
showMap();
drawRect(0, 0);