[SOLVED] How to find 2D canvas coordinate on Click/Touch?

Help & Support
1

The event.x and event.y value feels like the coordinate is from browser instead of canvas. The event.element returns application-canvas and I don’t know how to get the screen position. My canvas size is 1280,720. I want to have result like vec2(-450, -115), but I am getting vec2(133,173) and the vec2 changes according to the browser size.

this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPressStart, this);
prototype.onPressStart = function (event) {
var rect = event.element.getBoundingClientRect();
    
    // Convert window coordinates to canvas coordinates
    var canvasX = event.x - rect.left;
    var canvasY = event.y - rect.top;
    
    console.log('Canvas Coordinates:', canvasX, canvasY);
}
2

found solution with

var canvas = event.element;
var rect = canvas.getBoundingClientRect();