Add tool for obtaining <area> coords from image

[Josh-Cena]

Fix #37469. Technically this isn't an "example" because it doesn't use <area>, but I have no better place to put it.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/CSS_shapes/Shape_generator
• /en-US/docs/Web/CSS/CSS_shapes
• /en-US/docs/Web/HTML/Reference/Elements/area

(comment last updated: 2025-07-31 13:59:21)

[estelle]

I think this is best added to MDN as a tool, similar to the color picker and border generator.
I would house it as a "coordinates" tool, under the CSS shapes module, and link to it from basic shapes, and some shapes like https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon, and from anywhere where "coords" is a feature.
then we can link to it from the see also section on the <area> page.

[Josh-Cena]

The reason I'm hesitant to do that is because my tool only supports the three shapes that coords accepts, so it would be kind of confusing to put in <basic-shape> as a general tool. Happy to do that and let you see how it looks.

[estelle]

The reason I'm hesitant to do that is because my tool only supports the three shapes that coords accepts, so it would be kind of confusing to put in <basic-shape> as a general tool. Happy to do that and let you see how it looks.

I didn't even notice the drop down. Could you add a "single point" as an <option> and output both "coords" and either

1. circle()
2. rect(), inset(), and xywh(), or
3. `polygon()

if you want to be ambitious, you could also add

1. cx, cy, and r for an SVG <circle>,
2. x, y, width and height for SVG <rect>, and
3. points for SVG <polygon>

that doesn't cover all the shapes, but makes your picker useful for coords attribute, six of the basic shapes, and, optionally, SVG shapes

[estelle]

i played with the layout a bit; adding headers to the output, and styling it as a DL

https://codepen.io/estelle/pen/empZMgj

[estelle]

This is looking really good. Not sure if you wanted a re-review yet.

There is an issue with the entire thing disappearing and then reappearing in my browser. Not sure if it's a Firefox thing, MDN play think, canvas thing, or PR dev env thing.

[Josh-Cena]

I get that too, and not sure why that is. This is ready for re-review.

[estelle]

one suggestion. Looks good!

[Josh-Cena]

Looks much better, thanks!