Purpose of this is to do playwright ui automation. I have locators of canvas.

Below code gives me coordinates, but of viewport

const canvas = document.getElementById("canvas");

canvas.addEventListener("click", (e) => { const rect = canvas.getBoundingClientRect();

const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;

const x = (e.clientX - rect.left) * scaleX;
const y = (e.clientY - rect.top) * scaleY;

console.log(`True Canvas Coordinates: (${x}, ${y})`);

});