JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas_element"></canvas>
<div id="output"></div>

JavaScript

function getMousePosition(canvas, event){
  let rect = canvas.getBoundingClientRect();
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;
  document.getElementById('output').innerText = x + ", " + y;
}

canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("mousedown", function(e){
	getMousePosition(canvasElem, e);
});