Get the center point of a DOMRect

Return [x, y] of the rect’s center.

JavaScript Version 1.0.0 · MIT · .md

function getCenter({ x, y, width, height }) { return [x + width / 2, y + height / 2]; }

Input & expected output

{
  "x": 0,
  "y": 0,
  "width": 200,
  "height": 400
}

[
  100,
  200
]

The edge case

{
  "x": 10,
  "y": 10,
  "width": 0,
  "height": 0
}

[
  10,
  10
]

Know the limits

• Coordinates are in the rect’s own space: viewport pixels for getBoundingClientRect(). Add window.scrollX and scrollY for document coordinates.

The function above is the implementation used by the lab. The lab validates JSON types and caps size before execution; include equivalent validation when accepting untrusted input in your application.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.