Introduction

Checking whether two rectangles overlap is a standard problem in geometry, UI layout, and game collision systems. The cleanest way to solve it is not to look for overlap directly, but to test the simpler cases where overlap is impossible.

Assume Axis-Aligned Rectangles

The common version of this problem assumes each rectangle is axis-aligned, meaning its sides are parallel to the x-axis and y-axis. A rectangle can be stored as four values:

• left x-coordinate
• bottom y-coordinate
• right x-coordinate
• top y-coordinate

For example, (0, 0, 4, 3) means the rectangle spans from x 0 to 4 and y 0 to 3.

The Non-Overlap Rule

Two axis-aligned rectangles do not overlap if at least one of these is true:

• one is completely to the left of the other
• one is completely above the other

That leads to a compact implementation:

1def overlaps(a, b):
2    ax1, ay1, ax2, ay2 = a
3    bx1, by1, bx2, by2 = b
4
5    no_overlap = (
6        ax2 <= bx1 or
7        bx2 <= ax1 or
8        ay2 <= by1 or
9        by2 <= ay1
10    )
11    return not no_overlap
12
13
14rect1 = (0, 0, 4, 3)
15rect2 = (2, 1, 5, 4)
16print(overlaps(rect1, rect2))

This prints True because the rectangles share positive area.

Why the Comparison Operators Matter

The choice between < and <= determines whether touching edges count as overlap.

Using <= means touching at an edge or corner does not count as overlap:

rect1 = (0, 0, 2, 2)
rect2 = (2, 0, 4, 2)
print(overlaps(rect1, rect2))  # False

That definition is common in collision detection where overlap means shared area. If your problem considers touching as a hit, replace the <= checks with <.

Normalize Input First If Needed

Real data is not always well-formed. Sometimes coordinates arrive in the wrong order. A small normalization step makes the function safer:

1def normalize(rect):
2    x1, y1, x2, y2 = rect
3    return min(x1, x2), min(y1, y2), max(x1, x2), max(y1, y2)
4
5
6def overlaps(a, b):
7    ax1, ay1, ax2, ay2 = normalize(a)
8    bx1, by1, bx2, by2 = normalize(b)
9
10    return not (
11        ax2 <= bx1 or
12        bx2 <= ax1 or
13        ay2 <= by1 or
14        by2 <= ay1
15    )
16
17
18print(overlaps((4, 3, 0, 0), (2, 1, 5, 4)))

That avoids subtle bugs caused by rectangles defined from arbitrary drag directions.

A JavaScript Version

The same logic translates directly to other languages:

1function overlaps(a, b) {
2  const [ax1, ay1, ax2, ay2] = a;
3  const [bx1, by1, bx2, by2] = b;
4
5  return !(
6    ax2 <= bx1 ||
7    bx2 <= ax1 ||
8    ay2 <= by1 ||
9    by2 <= ay1
10  );
11}
12
13console.log(overlaps([0, 0, 4, 3], [2, 1, 5, 4]));

Once you understand the geometry, the language becomes almost irrelevant.

Extending the Idea

This rectangle test is often a building block. You can use it for:

• hit testing in drawing tools
• broad-phase collision checks in games
• window and widget layout calculations
• spatial filtering before more expensive geometry work

Because the algorithm uses only a few comparisons, it is extremely fast and easy to run at scale.

Common Pitfalls

The biggest pitfall is not defining whether touching counts as overlap. Different applications want different answers, so choose the comparison operators intentionally.

Another common issue is inconsistent coordinate conventions. Some systems use top-left plus width and height instead of two corners. Convert those values into a consistent rectangle representation before testing.

Developers also forget to normalize coordinates when rectangles can be created in reverse order. That can turn a correct algorithm into a wrong result.

Finally, this logic assumes axis-aligned rectangles. Rotated rectangles need a more advanced intersection test.

Summary

• The easiest way to test rectangle overlap is to check the cases where overlap is impossible.
• For axis-aligned rectangles, compare left, right, top, and bottom boundaries directly.
• Decide whether touching edges count as overlap before choosing < or <=.
• Normalize input coordinates if rectangle corners may arrive in arbitrary order.
• This simple test is fast and widely useful in graphics, layout, and collision systems.