Recommended Free Tools
For clickable regions on an image, connect an <img> to a <map> with usemap, then describe each region with an <area>. Image-map coordinates are measured in CSS pixels from the displayed image’s top-left corner. For JavaScript pointer events, subtract the image’s viewport-relative left and top edges from event.clientX and event.clientY; scale the result only when you need source-image pixels or canvas drawing-buffer coordinates.
Choose the coordinate system for the job
“Image coordinates” can mean several different things. Keeping the systems separate prevents common errors such as treating a viewport position as an image pixel or feeding canvas backing-store coordinates into an HTML image map.
- Image-map coordinates: coordinates in an
<area>element’scoordsattribute. They describe clickable regions relative to the displayed image’s top-left corner, in CSS pixels. - Displayed-image coordinates: a pointer position relative to the visible image element, also expressed in CSS pixels. Obtain these by subtracting the element’s bounding rectangle origin from the pointer’s viewport coordinates.
- Intrinsic image coordinates: positions in the source image’s pixel grid, available from
naturalWidthandnaturalHeight. Convert to these when a task needs the original image pixels. - Canvas coordinates: positions in the canvas drawing buffer, whose dimensions are
canvas.widthandcanvas.height. Convert from displayed CSS pixels if those dimensions differ.
Before writing code, decide whether the goal is to create semantic linked regions, inspect where someone clicked, or draw/read pixels. Those are related tasks, but their final coordinate values are not interchangeable.
Create clickable regions with an HTML image map
Use an image map when parts of a static image should act as links. The usemap value points to the map’s name, prefixed with #. Each <area> defines one region and can provide a destination through href. The coordinate values use the displayed image’s coordinate system.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
<img src="plan.png" usemap="#plan-map" alt="Floor plan with rooms">
<map name="plan-map">
<area shape="rect" coords="20,30,180,140" href="kitchen.html" alt="Kitchen">
<area shape="circle" coords="280,100,45" href="lounge.html" alt="Lounge">
<area shape="poly" coords="360,30,430,80,410,150,350,120" href="office.html" alt="Office">
</map>The map name and the image’s usemap reference must match. The image’s alt describes the image, while each linked area’s alt should communicate the same choice as its link—for example, “Kitchen” for a link to the kitchen page. This gives people who do not see the image an accessible way to understand and use the choices.
Rectangle: two corners
For shape="rect", coords is x1,y1,x2,y2: the x/y position of the top-left corner followed by the x/y position of the bottom-right corner. For example, 20,30,180,140 starts 20 CSS pixels from the image’s left and 30 from its top, and ends at x=180, y=140.
Circle: center and radius
For shape="circle", supply centerX,centerY,radius. Thus 280,100,45 describes a circle centered at x=280, y=100 with a radius of 45 CSS pixels.
Polygon: ordered point pairs
For shape="poly", provide an ordered sequence of x/y pairs: x1,y1,x2,y2,.... Each pair is a vertex. Use enough vertices to trace the intended outline in order; in the example, the four pairs define the office region.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
Whole-image fallback
A shape="default" area represents the entire image and does not use a coords attribute. Use it only when a link should apply to any part of the image not otherwise described, or to the whole image as appropriate to the map’s design.
Get the x/y position of a click on an image
Pointer event properties such as clientX and clientY are relative to the viewport. The image’s getBoundingClientRect() returns its viewport-relative position and displayed size. Subtract left and top to get the click’s position inside the displayed image.
const image = document.querySelector("img");
image.addEventListener("click", (event) => {
const rect = image.getBoundingClientRect();
const xCss = event.clientX - rect.left;
const yCss = event.clientY - rect.top;
console.log({ xCss, yCss });
});Here, xCss and yCss are distances in CSS pixels from the displayed image element’s top-left corner. The rectangle’s position is relative to the viewport and already reflects document scrolling, so do not add scrollX or scrollY to these client-coordinate calculations.
For a point guaranteed to be within the visible image, the resulting x and y should be within the displayed width and height. A click on padding or outside an image’s visible content can produce coordinates that do not correspond to a source pixel; if your layout applies padding or borders, identify whether your measurement should be relative to the element’s border box or the image content and account for that layout explicitly.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Convert displayed coordinates to source-image pixels
If a source image is displayed at a different size from its intrinsic dimensions, multiply each displayed CSS coordinate by the ratio of intrinsic size to displayed size. The image’s naturalWidth and naturalHeight give the intrinsic dimensions.
const image = document.querySelector("img");
image.addEventListener("click", (event) => {
const rect = image.getBoundingClientRect();
const xCss = event.clientX - rect.left;
const yCss = event.clientY - rect.top;
const xImage = xCss * image.naturalWidth / rect.width;
const yImage = yCss * image.naturalHeight / rect.height;
console.log({ xImage, yImage });
});For example, if a source image is 1200 pixels wide but displayed at 600 CSS pixels, a displayed x of 150 maps to source x=300. The ratio must be calculated independently for width and height: non-uniform stretching can make them different. This conversion is for source-pixel tasks; it is not the coordinate system to substitute into <area coords>.
Wait for the image to load before relying on its intrinsic dimensions. If the image has not loaded, naturalWidth and naturalHeight may not yet provide usable dimensions. A load handler or an image-loading step avoids converting with unavailable source dimensions.
Map responsive image coordinates correctly
For an HTML image map, the browser interprets the area coordinates against the displayed image after CSS width or height stretching. In that processing model, browser zoom and CSS/SVG transforms do not change the coordinate interpretation. Do not scale image-map coordinates to the source image’s intrinsic pixel dimensions simply because the rendered image is responsive.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
For JavaScript pointer mapping, the sequence is different: start with viewport-relative pointer coordinates, subtract the current DOM rectangle origin to get displayed CSS coordinates, then scale to intrinsic pixels only if that is the intended target system. Recalculate getBoundingClientRect() when you handle the event rather than keeping an old rectangle across arbitrary layout changes. Resizing, orientation changes, or other layout shifts can change the element’s position or dimensions.
For a responsive map that must preserve a specific design, ensure the area coordinates remain appropriate for the displayed image geometry as it changes size. If instead you are tracking clicks with JavaScript, use the live rectangle and the scale conversion above. Avoid mixing a cached size, source-pixel positions, and current CSS dimensions in the same calculation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Convert pointer coordinates for a canvas
A canvas has a displayed CSS size and a drawing-buffer size. When those differ, subtract the canvas rectangle’s origin and scale each axis into the drawing buffer:
const canvas = document.querySelector("canvas");
canvas.addEventListener("click", (event) => {
const rect = canvas.getBoundingClientRect();
const xCanvas = (event.clientX - rect.left) * canvas.width / rect.width;
const yCanvas = (event.clientY - rect.top) * canvas.height / rect.height;
console.log({ xCanvas, yCanvas });
});Use these values when addressing the canvas drawing buffer. They are not automatically the same as CSS pixels or source-image pixels. If drawing an image into a canvas, keep the source rectangle (the portion read from the image) distinct from the destination rectangle (where and at what size it is drawn on the canvas). When the image is drawn scaled or cropped, mapping a canvas point back to the image also requires applying that drawing transformation.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Image maps or canvas: which approach fits?
| Need | Image map | Canvas |
|---|---|---|
| Clickable regions that navigate to links | Declarative linked areas using <map> and <area>; each linked region needs meaningful alt text. |
A drawing surface. Link behavior and accessible alternatives must be implemented separately. |
| Responsive geometry | Area coordinates are interpreted against the displayed image under the HTML image-map model. | Pointer coordinates must be scaled from the displayed rectangle to the canvas drawing buffer. Any image drawing or cropping transform also matters. |
| Pointer-event precision | Useful when the regions are known in advance and can be described with supported shapes. | Useful when the application needs to calculate or redraw regions and handle drawing-buffer coordinates. |
| Implementation approach | Define shapes and destinations in HTML. | Handle pointer events and drawing logic in JavaScript. |
Troubleshoot coordinate mistakes
The click is offset from the expected location
Check whether you are subtracting the current rect.left and rect.top from clientX and clientY. Those values use the same viewport-relative coordinate basis. Do not substitute page-relative pointer properties without also changing the position calculation. Also check for layout changes since a rectangle was measured.
Coordinates work at one size but not another
First decide whether the values belong to an image map, source image, or canvas. Image-map coordinates refer to the displayed image in CSS pixels; source-image coordinates require scaling by naturalWidth / rect.width and naturalHeight / rect.height; canvas coordinates scale by canvas.width / rect.width and canvas.height / rect.height. Applying the wrong ratio, or applying a ratio twice, produces size-dependent errors.
Intrinsic dimensions are zero or incorrect
Confirm that the image has loaded before reading naturalWidth or naturalHeight. Then check that you are reading the intended image element and that its source is the image whose pixels you are mapping.
An image-map area does not match the intended region
Verify the map reference and map name, then check the shape’s coordinate order: rectangle corners, circle center and radius, or polygon x/y pairs in vertex order. Confirm that the coordinates are in the displayed-image system rather than copied from a differently sized source file.
Free tools Windows power users keep installed
One-click scans. No signup required.
Canvas clicks are scaled incorrectly
Compare canvas.width and canvas.height with the displayed rectangle’s width and height. If the canvas buffer is larger or smaller, apply the scale factors in both axes. If the canvas contains a scaled or cropped image, also reverse the image’s source-to-destination mapping rather than assuming the canvas point is already an image point.
Or skip the browser setup
If you need a screenshot as a reference for locating an image region, ScreenshotNeo can return an image capture with one GET request. The screenshot itself does not supply image-map coordinates; you still choose the coordinate system and define or calculate the region as described above.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, and cache hits are never billed. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →
