JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>


</head>

<body>


<div id="test" style="width: 200px; height:200px; margin: 0px auto;">
    <canvas id="myCanvas" width="200" height="200">
    Your browser does not support the canvas element.
    </canvas>
</div>

</body>
</html>

JavaScript

var CANVAS_DIMENSION = 200;
var CANVAS_WIDTH = 10;
var CANVAS_HEIGHT = 10;

var GRID_CELL_WIDTH = CANVAS_DIMENSION / CANVAS_WIDTH;
var GRID_CELL_HEIGHT = CANVAS_DIMENSION / CANVAS_HEIGHT;

var canvas;
var context;
var grid;
var mouseCellColumn = -1;
var mouseCellRow = -1;

function init() {
    canvas = document.getElementById("myCanvas");

    context = canvas.getContext("2d");

    canvas.addEventListener('mousemove', updateMousePosition, false);

    grid = new Array(CANVAS_WIDTH);
    for (var i = 0; i < CANVAS_WIDTH; ++i) {
        grid[i] = new Array(CANVAS_HEIGHT);

        for (var j = 0; j < CANVAS_HEIGHT; ++j) {
            grid[i][j] = "#0000FF";
        }
    }

    renderScene()
}


function updateMousePosition(event) {
    var initialColumn = mouseCellColumn;
    var initialRow = mouseCellRow;

    var objectPosition = findPos(this);

    var gridPosition = new Point(event.pageX - objectPosition.x, event.pageY - objectPosition.y);

    mouseCellColumn = getColumn(gridPosition.x);

    mouseCellRow = getRow(gridPosition.y);

    var cell_position = getCellPosition(mouseCellColumn, mouseCellRow);

    // outline the current cell
    drawRectangleOutlineWithColour(cell_position.x, cell_position.y, GRID_CELL_WIDTH, GRID_CELL_HEIGHT, "#FF0000");

    // if mouse has moved cell redraw
    if (((initialColumn != mouseCellColumn) || (initialRow != mouseCellRow)) && (initialColumn > -1) && (initialRow > -1)) {
        renderGridCell(initialColumn, initialRow);
    }

}


function renderScene() {
    for (var i = 0; i < CANVAS_WIDTH; ++i) {
        for (var j = 0; j < CANVAS_HEIGHT; ++j) {
            renderGridCell(i, j);
        }
    }
}


function renderGridCell(Column, Row) {
    var position = getCellPosition(Column, Row);

    drawRectangleWithColour(position.x, position.y, GRID_CELL_WIDTH, GRID_CELL_HEIGHT, grid[Column][Row]);
}


function drawRectangleWithColour(minX, minY, width, height, colour) {
    context.fillStyle = colour;

   ...