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

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

Specifications

Specification
HTML
# dom-area-coords

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
coords

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also