JavaScript Coordinates

JavaScript provides various ways to track coordinates of elements, mouse events, and touch inputs on a webpage. These coordinates help in drag-and-drop, animations, drawing on canvas, and more.

1. Different Types of Coordinates in JavaScript

Property	Reference Point	Example Usage
`clientX`, `clientY`	Viewport (excluding scroll)	Tracking mouse within the visible screen
`pageX`, `pageY`	Full document (including scroll)	Detecting a mouse on a scrolled page
`screenX`, `screenY`	Screen (monitor)	Multi-screen tracking
`offsetX`, `offsetY`	Element relative (padding box)	Canvas drawing, element interaction
`getBoundingClientRect()`	Element relative (box model)	Finding an element’s position

2. Mouse Event Coordinates

Example: Track Mouse Position

document.addEventListener("mousemove", function(event) {
    console.log(`Client: (${event.clientX}, ${event.clientY})`);
    console.log(`Page: (${event.pageX}, ${event.pageY})`);
    console.log(`Screen: (${event.screenX}, ${event.screenY})`);
});

📌 What’s the difference?

clientX/Y → Relative to viewport (ignores scroll).
pageX/Y → Relative to entire page (includes scroll).
screenX/Y → Relative to physical screen (monitor).

3. Getting an Element’s Position

Example: Get Position of a Button

let btn = document.getElementById("myButton");
let rect = btn.getBoundingClientRect();

console.log(`Top: ${rect.top}, Left: ${rect.left}`);
console.log(`Width: ${rect.width}, Height: ${rect.height}`);

🔹 getBoundingClientRect() returns an object with the element’s size and position relative to the viewport.

4. Click Position Relative to an Element

Example: Track Clicks Inside a Box

document.getElementById("box").addEventListener("click", function(event) {
    console.log(`OffsetX: ${event.offsetX}, OffsetY: ${event.offsetY}`);
});

🔹 offsetX/Y gives coordinates relative to the clicked element (not the whole page).

5. Tracking Touch Coordinates (Mobile Devices)

Example: Get Touch Position

document.addEventListener("touchmove", function(event) {
    let touch = event.touches[0]; // First finger
    console.log(`Touch at: (${touch.clientX}, ${touch.clientY})`);
});

🔹 event.touches contains all fingers currently touching the screen.

6. Dragging an Element Using Coordinates

Example: Make an Element Draggable

let box = document.getElementById("box");

box.addEventListener("mousedown", function(event) {
    let shiftX = event.clientX - box.getBoundingClientRect().left;
    let shiftY = event.clientY - box.getBoundingClientRect().top;

    function moveAt(x, y) {
        box.style.left = x - shiftX + "px";
        box.style.top = y - shiftY + "px";
    }

    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
    }

    document.addEventListener("mousemove", onMouseMove);

    document.addEventListener("mouseup", function() {
        document.removeEventListener("mousemove", onMouseMove);
    }, { once: true });
});

🔹 This drags the element by updating its left and top positions.

7. Summary of JavaScript Coordinate Systems

Coordinate Type	Reference	When to Use?
`clientX/Y`	Viewport	Mouse tracking in visible area
`pageX/Y`	Full document	Handling scrolling pages
`screenX/Y`	Physical screen	Multi-monitor setups
`offsetX/Y`	Element	Drawing inside elements
`getBoundingClientRect()`	Element (viewport-based)	Get element's position

🚀 Need help with coordinates? Let me know! 📍

Souy Soeng

JavaScript Coordinates