JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas 
{
    width: 500px;
    height: 500px;
    border: 1px #000 solid;
}

JavaScript

function getRandomNumber(max)
	{
		return Math.floor(Math.random() * max);
    }

var colors = ["Red", "Green", "Blue"];

function createTileArea()
	{
		var stage = new createjs.Stage("tileArea");
		stage.name = "stage";
		var size = 50;
		
		for (row = 0; row < 10; row++) {
			for (col = 0; col < 10; col++) {
				var id = row + "_" + col;
				var color = colors[getRandomNumber(3)];
				
				var tile = new createjs.Shape();
				tile.graphics.beginFill(color);
				tile.graphics.drawRect(0, 0, size, size);
				tile.graphics.endFill();
				tile.x = col * size;
				tile.y = row * size;
				tile.height = size;
				tile.width = size;
				tile.name = id;
							
				stage.addChild(tile);
			}
		}
		
		stage.update();
	}

createTileArea();