JSFiddle - React, Tailwind, and code Playground

by Vaibhav Mehta

HTML

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

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    height = canvas.height = 500,
    width = canvas.width = 500;
var size = 50;
var grid = [];

function color() {
    var v = function() {
        return Math.floor(Math.random() * 127) + 128;
    };
    return 'rgba(' + v() + ',' + v() + ',' + v() + ',1)';
}
generate();
render();

function generate() {
    grid = [];
    for (var x = 0; x < width; x += size) {
        grid[x] = [];
        for (var y = 0; y < height; y += size) {
            grid[x][y] = color();
        }
    }
}

function render() {
    context.clearRect(0, 0, width, height);
    for (var x = 0; x < width; x += size) {
        for (var y = 0; y < height; y += size) {
            context.beginPath();
            console.log(grid[x][y]);
            context.fillStyle = grid[x][y];
            context.fillRect(x, y, size, size);
            context.closePath();
        }
    }
}