Axis-aligned rectangle implementation

Implementation Details

Reference paths

  • '/foundation/_digest.ts'
  • '/foundation/core/math/_digest.ts'
  • '/foundation/core/math/Rectangle.ts'


This type does not extend a base type.


This type implements the following interfaces:

All implementations exhibit default defined behaviors.

Overlap Implementation

When checking for overlap with another rectangle, a simple (cheap) bounds check is employed. When checking for overlap with a polygon, the current rectangle is reconstructed as a polygon and a poly-to-poly SAT test is used (expensive).

Transform implementation

When being transformed by an input matrix, the midpoint of the rectangle is transformed, not the origin. As a consequence, on uniform translations will take place. The rectangle will not scale or rotate by the matrix. As example, if the rectangle is 100*100px and center aligned on another object, o, a transformation which rotates o around point p will, when applied to the rectangle, only move the rectangle such that it is still 100*100px, axis-aligned, but centered on the new position of o.

Storage types

Components x, y, width, height are stored internally in a 4-slot Float32Array. This should be kept in mind with respect to the precision of those values when accessing them.

Public Properties

x: number

  • Rectangle's position on the X axis

y: number

  • Rectangle's position on the Y axis.

width: number

  • Rectangle's width.

height: number

  • Rectangle's height.

top: number

  • Semantic alias for y

right: number

  • Semantic alias for x + width

bottom: number

  • Semantic alias for y + height

left: number

  • Semantic alias for x



  • Default constructor.
  • Sets all components to 0.

(x: number, y: number, width: number, height: number)

  • Explicitly initialize components.