JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="200" >
    
</canvas>

CSS

#canvas {
    width: 200px;
    height: 200px;
    display:block;
    background-color: black;
}

JavaScript

var canvas = document.getElementById("canvas");

    canvas.addEventListener('click', mudacor); 

    var ctx = canvas.getContext("2d");
    
    var linha = 10, coluna = 10;
    //guarda em uma lista a cor de cada grid    
    var grids = [];

function mudacor(event) {
    var x = event.pageX - canvas.offsetLeft,
        y = event.pageY - canvas.offsetTop;
    x = x/20|0;
    y = y/20|0;
    var grid = grids[x][y];
    grid.color = "#00ff00";
    for (i =0; i < linha; i++) {
        for(j = 0; j < coluna; j++){
            dRs(grids[i][j], ctx)
        }
    }
    }

    function dRs(grid, c) {
        c.beginPath();
        c.lineWidth= 1;
        c.strokeStyle= "#000000";
        c.fillStyle= grid.color;
        c.fillRect(grid.x,grid.y,grid.w,grid.h);      
        c.stroke();
        c.rect(grid.x,grid.y,grid.w,grid.h);      
        c.stroke();
    }

    
    for (i =0; i < linha; i++) {
        grids[i] = [];
        for(j = 0; j < coluna; j++){
            grids[i][j] = {
                x: i *20,
                y: j *20,
                h: 20,
                w: 20,
                color: "#ff0000"
            }
        }
    }

    for (i =0; i < linha; i++) {
        for(j = 0; j < coluna; j++){
            dRs(grids[i][j], ctx)
        }
    }