Event Map X,Y Help

Event Map X,Y Help

Hi Guys,

I was wondering, is there a way of altering the position of the 0,0 X,Y coordinates in the below pen at all? It’s been altered from another project, but when I use the coordinates with Tableau for example they are always upside down, or sideways if I flip the axis - if the the 0,0 X,Y coordinates were in the bottom left corner of the ‘pitch-container’ then this would work as desired when exporting the coordinates to csv.


Any advice on this would be very welcome!


I have no idea what you are trying to do. Your project makes absolutely no sense to me.

I’ll use a different pen as an example:


This is an event tracker that outputs x, y coordinates that can be exported to CSV.

The 0,0 coordinates is in the top left of the pitch canvas, I want to know if its possible for the 0,0 coordinates to be in the bottom left of the pitch canvas as this makes downstream analysis much easier.

Hopefully that makes more sense?

Seems like a simple math insertion does what you’re asking:

myCanvas.addEventListener('click', function(evt) {
        var mousePos = getMousePos(myCanvas, evt);
        mousePos.y = 680 - mousePos.y;  <-------- add this line
        var table = document.getElementById("data-body");
1 Like

Maybe even more accurate than hardcoding 680 is:

const $canvas = document.getElementById('myCanvas');
const canvasHeight = $canvas.offsetHeight;

mousePos.y = canvasHeight - mousePos.y;

This would include the border of 1px… which makes it 682px (top and bottom border)

Brilliant, thanks @kerafyrm02 - this has worked perfectly for what I wanted :+1: