JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400" style="width: 200px; height: 200px;"></canvas>

CSS

canvas {
  border: 10px solid black;
  box-sizing: content-box;
}

JavaScript

// Source: https://www.jacklmoore.com/notes/mouse-position/

document.getElementById('canvas').addEventListener('click', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement,
    style = target.currentStyle || window.getComputedStyle(target, null),
    borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
    borderTopWidth = parseInt(style['borderTopWidth'], 10),
    rect = target.getBoundingClientRect(),
    offsetX = e.clientX - borderLeftWidth - rect.left,
    offsetY = e.clientY - borderTopWidth - rect.top;
  let x = offsetX * target.width / target.clientWidth;
  let y = offsetY * target.height / target.clientHeight;


  var ctx = target.getContext('2d');
  ctx.clearRect(0, 0, 400, 400);
  ctx.font = '50px sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(`${x},${y}`, 200, 200);
});