A coordinate is a number, or a set of numbers, that locates a point relative to an origin. On a 2D web page, a point is usually written as (x, y): x measures horizontal position and y measures vertical position. In the viewport coordinate system, (0, 0) is the top-left corner, x increases to the right, y increases downward, and values are normally measured in pixels. Coordinates may also be negative or extend beyond the visible viewport. section 1.4.9 section 10.1
Coordinates turn visible UI locations into values JavaScript and CSS can use. Mouse events expose viewport coordinates through clientX and clientY. Element measurements from getBoundingClientRect() describe edges relative to that same viewport origin. This shared reference frame makes it possible to compare a pointer position with an element position. section 1.4.9 section 13.5
Find where a click happened inside an element
A pointer coordinate is relative to the viewport, not automatically to the clicked element. Subtract the element’s left and top edges to get local coordinates. Then divide by width and height when the UI needs a reusable 0-to-1 position, such as mapping a gradient click to hue and lightness. const rect = element.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const normalizedX = x / rect.width; const normalizedY = y / rect.height; section 13.1.3 section 13.5
Coordinates also support common visual calculations:
- Draw canvas lines between explicit points, such as from (50, 50) to (250, 100). section 1.4.7
- Describe a circular point from a center, radius, and angle: x = centerX + r * cos(angle), y = centerY + r * sin(angle). section 9.1.1 section 9.6
- Represent movement as a vector offset: adding [50, 20] to (100, 100) moves the resulting point right and down. section 10.1
- Use a simulated z coordinate as depth in a 2D canvas effect, with smaller z values producing faster and larger stars. section 14.2.2
element.addEventListener('click', (event) => { #1
const rect = element.getBoundingClientRect(); #2
const elementX = event.clientX - rect.left; #3
const elementY = event.clientY - rect.top; #3
const percentX = (elementX / rect.width) * 100; #4
const percentY = (elementY / rect.height) * 100; #4
console.log(`Clicked at ${percentX}% across, ${percentY}% down`);
});
This calculation makes the coordinate-system shift explicit: viewport pointer values become positions inside the clicked element, then percentages across and down. section 13.1.3
The practical habit is to name the coordinate system before calculating. A value from clientX is viewport-relative; a value after subtracting rect.left is element-relative. Mixing those frames, or adding where subtraction is required, produces the familiar result of a pointer position that appears offset or wrong. section 13.1.3 section 10.6
