JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='can'></canvas>
<br>
<button id="clearBtn">Clear</button>

JavaScript

var can = getById('can'),
    boxes = 200,
    size = 10,
    ctx = can.getContext('2d'),
    clearBtn = getById('clearBtn');

drawGrid();

function drawGrid() {
    var len = can.height = can.width = boxes * size;
    for (var i = 0; i < boxes; i++) {
        ctx.beginPath();
        ctx.moveTo(size + size * i - .5, 0);
        ctx.lineTo(size + size * i - .5, len);
        ctx.moveTo(0, size + size * i - .5);
        ctx.lineTo(len, size + size * i - .5);
        ctx.stroke();
    }
}


can.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(can, evt);
    var sx = (Math.ceil(mousePos.x/size)-1)*size,
        sy =  (Math.ceil(mousePos.y/size)-1)*size;
    console.log(sx,sy,sx+size,sy+size);
    ctx.fillRect(sx,sy,size,size);
}, false);

clearBtn.addEventListener('click', function (evt) {
    ctx.clearRect(0,0,can.width,can.height);
    drawGrid();
});


function getMousePos(canvas, evt) {
    var rect = can.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function getById(x) {
    return document.getElementById(x);
}