W3cubDocs

/Web APIs

HTMLAreaElement: coords property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The coords property of the HTMLAreaElement interface specifies the coordinates of the element's shape as a list of floating-point numbers. It reflects the <area> element's coords attribute.

If the shape is rect, the shape is a rectangle and the string value's four comma separated numbers specify the coordinates of the top-left and bottom-right corners of the rectangle. For example, 0,0,200,20 defines the coordinates as 0,0, which is the top-left of the image map, and 200,20, which is 200px from the left and 20px from the top of the top-left corner of the image map.

If the shape is circle, the three comma-separated numbers represent the x and y coordinates of the circle's center and the radius.

If the shape is poly, the string consists of at least 6 comma-separated numbers representing at least 3 pairs of coordinates that define the vertices of the polygon.

For all coordinates, the origin is the top-left corner of the <map> element's image.

Value

A string; composed of a comma separated series of numbers.

Examples

const areaElement = document.getElementById("circleArea");
console.log(areaElement.coords);
areaElement.coords = "25,25,25";

Specifications

Specification
HTML>
# dom-area-coords>

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
coords 1 12 1 ≤12.1 1 18 4 ≤12.1 1 1.0 4.4 1

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/coords