JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="570" height="570" style="background-color: #dcb25c;"></canvas>

JavaScript

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, n) {
        return args[n];
    });
};
var $canvas = $('#canvas');
var c = $canvas[0].getContext('2d');
var scale = 20;
var xMult = $canvas.width() / scale;
var yMult = $canvas.height() / scale;
var mouseX = 0;
var mouseY = 0;
c.scale(xMult, yMult);
c.lineWidth = 1 / scale;
c.font = '1pt Calibri';
c.lineCap = 'square';

function loadPath() {
    c.beginPath();
    for (var i = 0; i <= 19; ++i) {
        var j = 0.5 + i;
        c.moveTo(j, 0.5);
        c.lineTo(j, 19.5);
        c.moveTo(0.5, j);
        c.lineTo(19.5, j);
    }
}
    
function render() {
    c.clearRect(0, 0, scale, scale);
    c.fillStyle = '#544423';
    // We can redraw the path here that is still on the context
    // Since it is the only path there is no need to remake it
    c.stroke();
    c.fillStyle = '#ffffff';
    c.fillText('{0}, {1}'.format(mouseX, mouseY), 0.5, 1.5);
}
loadPath();
render();
$canvas.mousemove(function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    render();
});