JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
        margin: 0px;
        padding: 0px;
      }

      #myCanvas {
        background-color: cornflowerblue;
  margin-left: 30px;
  margin-top: 30px;
      }

JavaScript

function writeMessage(canvas, message) {
	var context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);
  context.font = '18pt Calibri';
  context.fillStyle = 'black';
  context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
  writeMessage(canvas, message);
}, false);