JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="width: 1500px; height:800px;" id="myImage" width="1947" height="949"></canvas>

JavaScript

canvas = document.getElementById('myImage');
context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  drawTest(mousePos.x, mousePos.y);
}, false);

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

function drawTest(centerX, centerY) {
  //var rect = canvas.getBoundingClientRect();
  //centerX = centerX  + rect.left;
  //centerY = centerY  + rect.top;
  var radius = 5;
  context.beginPath();
  context.arc((centerX / 1500) * 1947, (centerY / 800)*949, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = '#003300';
  context.stroke();
}