JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="480" height="480" id="rectangles"></canvas>

CSS

canvas {border: solid 1px blue}

JavaScript

var canvas = document.getElementById('rectangles'),
	context = canvas.getContext('2d'),
    rectangles = [],
    rectWidth = canvas.width / 32,
    rectHeight = canvas.height / 32;
    
function makeRectangles() {
	var x, y, row;
    for (y = 0; y < 32; y++) {
    	row = [];
        for (x = 0; x < 32; x++) {
        	row.push(true);
            drawRectangle(x, y, true);
        }
        rectangles.push(row);
    }
}

function drawRectangle(x, y, black) {
	context.strokeStyle = 'cyan';
    context.fillStyle = black ? 'black' : 'white';
    context.beginPath();
    context.rect(x * rectWidth, y * rectHeight, rectWidth, rectHeight);
    context.fill();
    context.stroke();
}

function canvasClick(ev) {
	var x = Math.floor((ev.pageX - canvas.offsetLeft) / rectWidth),
    	y = Math.floor((ev.pageY - canvas.offsetTop) / rectHeight);
    rectangles[y][x] = !rectangles[y][x];
    drawRectangle(x, y, rectangles[y][x]);
}

makeRectangles();
canvas.addEventListener('click', canvasClick);