JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id = "koordinat">

</div>
<canvas onmousemove="showCoords(event)" style="width:300px; heght:300px; background-color:purple;">
  
  
</canvas>

JavaScript

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("koordinat").innerHTML = coords;
}

/*var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;
// or taking offset into consideration
var x_2 = touch.pageX - canvas.offsetLeft;
var y_2 = touch.pageY - canvas.offsetTop;
*/