# Rectangle

A Rectangle specifies an area that is enclosed by it’s top-left point (x, y), its width, and its height. It should not be confused with a rectangular path, it is not an item.

## Constructors

* `Rectangle(point, size)`

  Creates a Rectangle object.

  * Parameters:
  * `point:` `Point` — the top-left point of the rectangle
  * `size:` `Size` — the size of the rectangle
  * Returns:
  * `Rectangle`
* `Rectangle(object)`

  Creates a Rectangle object.

  * Parameters:
  * `object:` `Object` — an object containing properties to be set on the rectangle
  * Returns:
  * `Rectangle`

  Example:Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}

  ```jsx
  var rectangle = new Rectangle({
      point: [20, 20],
      size: [60, 60]
  });
  ```

  Example:Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}

  ```jsx
  var rectangle = new Rectangle({
      from: [20, 20],
      to: [80, 80]
  });
  ```
* `Rectangle(x, y, width, height)`

  Creates a rectangle object.

  * Parameters:
  * `x:` `Number` — the left coordinate
  * `y:` `Number` — the top coordinate
  * `width:` `Number`
  * `height:` `Number`
  * Returns:
  * `Rectangle`
* `Rectangle(from, to)`

  Creates a rectangle object from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them.

  * Parameters:
  * `from:` `Point` — the first point defining the rectangle
  * `to:` `Point` — the second point defining the rectangle
  * Returns:
  * `Rectangle`
* `Rectangle(rectangle)`

  Creates a new rectangle object from the passed rectangle object.

  * Parameters:
  * `rectangle:` `Rectangle`
  * Returns:
  * `Rectangle`

## Properties

* `x`

  The x position of the rectangle.

  * Type:
  * `Number`
* `y`

  The y position of the rectangle.

  * Type:
  * `Number`
* `width`

  The width of the rectangle.

  * Type:
  * `Number`
* `height`

  The height of the rectangle.

  * Type:
  * `Number`
* `point`

  The top-left point of the rectangle

  * Type:
  * `Point`
* `size`

  The size of the rectangle

  * Type:
  * `Size`

### Side Positions

* `left`

  The position of the left hand side of the rectangle. Note that this doesn’t move the whole rectangle; the right hand side stays where it was.

  * Type:
  * `Number`
* `top`

  The top coordinate of the rectangle. Note that this doesn’t move the whole rectangle: the bottom won’t move.

  * Type:
  * `Number`
* `right`

  The position of the right hand side of the rectangle. Note that this doesn’t move the whole rectangle; the left hand side stays where it was.

  * Type:
  * `Number`
* `bottom`

  The bottom coordinate of the rectangle. Note that this doesn’t move the whole rectangle: the top won’t move.

  * Type:
  * `Number`

### Corner and Center Point Positions

* `center`

  The center point of the rectangle.

  * Type:
  * `Point`
* `topLeft`

  The top-left point of the rectangle.

  * Type:
  * `Point`
* `topRight`

  The top-right point of the rectangle.

  * Type:
  * `Point`
* `bottomLeft`

  The bottom-left point of the rectangle.

  * Type:
  * `Point`
* `bottomRight`

  The bottom-right point of the rectangle.

  * Type:
  * `Point`
* `leftCenter`

  The left-center point of the rectangle.

  * Type:
  * `Point`
* `topCenter`

  The top-center point of the rectangle.

  * Type:
  * `Point`
* `rightCenter`

  The right-center point of the rectangle.

  * Type:
  * `Point`
* `bottomCenter`

  The bottom-center point of the rectangle.

  * Type:
  * `Point`
* `area`

  The area of the rectangle.

  Read only.

  * Type:
  * `Number`

### Item Bounds

* `selected`

  Specifies whether an item’s bounds are to appear as selected.

  Paper.js draws the bounds of items with selected bounds on top of your project. This is very useful when debugging.

  * Default:
  * `false`
  * Type:
  * `Boolean`

  Example:

  Run

  ```jsx
  var path = new Path.Circle({
      center: [80, 50],
      radius: 40,
      selected: true
  });

  path.bounds.selected = true;
  ```

## Methods

* `set(...values)`

  Sets the rectangle to the passed values. Note that any sequence of parameters that is supported by the various `Rectangle`() constructors also work for calls of `set()`.

  * Parameters:
  * `values:` `any value`
  * Returns:
  * `Rectangle`
* `clone()`

  Returns a copy of the rectangle.

  * Returns:
  * `Rectangle`
* `equals(rect)`

  Checks whether the coordinates and size of the rectangle are equal to that of the supplied rectangle.

  * Parameters:
  * `rect:` `Rectangle`
  * Returns:
  * `Boolean` — `true` if the rectangles are equal, `false` otherwise
* `toString()`
  * Returns:
  * `String` — a string representation of this rectangle
* `isEmpty()`
  * Returns:
  * `Boolean` — `true` if the rectangle is empty, `false` otherwise

### Geometric Tests

* `contains(point)`

  Tests if the specified point is inside the boundary of the rectangle.

  * Parameters:
  * `point:` `Point` — the specified point
  * Returns:
  * `Boolean` — `true` if the point is inside the rectangle’s boundary, `false` otherwise

  Example:Checking whether the mouse position falls within the bounding rectangle of an item:

  Run

  ```jsx
  // Create a circle shaped path at {x: 80, y: 50}
  // with a radius of 30.
  var circle = new Path.Circle(new Point(80, 50), 30);
  circle.fillColor = 'red';

  function onMouseMove(event) {
      // Check whether the mouse position intersects with the
      // bounding box of the item:
      if (circle.bounds.contains(event.point)) {
          // If it intersects, fill it with green:
          circle.fillColor = 'green';
      } else {
          // If it doesn't intersect, fill it with red:
          circle.fillColor = 'red';
      }
  }
  ```
* `contains(rect)`

  Tests if the interior of the rectangle entirely contains the specified rectangle.

  * Parameters:
  * `rect:` `Rectangle` — the specified rectangle
  * Returns:
  * `Boolean` — `true` if the rectangle entirely contains the specified rectangle, `false` otherwise

  Example:Checking whether the bounding box of one item is contained within that of another item:

  Run

  ```jsx
  // All newly created paths will inherit these styles:
  project.currentStyle = {
      fillColor: 'green',
      strokeColor: 'black'
  };

  // Create a circle shaped path at {x: 80, y: 50}
  // with a radius of 45.
  var largeCircle = new Path.Circle(new Point(80, 50), 45);

  // Create a smaller circle shaped path in the same position
  // with a radius of 30.
  var circle = new Path.Circle(new Point(80, 50), 30);

  function onMouseMove(event) {
      // Move the circle to the position of the mouse:
      circle.position = event.point;

      // Check whether the bounding box of the smaller circle
      // is contained within the bounding box of the larger item:
      if (largeCircle.bounds.contains(circle.bounds)) {
          // If it does, fill it with green:
          circle.fillColor = 'green';
          largeCircle.fillColor = 'green';
      } else {
          // If doesn't, fill it with red:
          circle.fillColor = 'red';
          largeCircle.fillColor = 'red';
      }
  }
  ```
* `intersects(rect[, epsilon])`

  Tests if the interior of this rectangle intersects the interior of another rectangle. Rectangles just touching each other are considered as non-intersecting, except if a `epsilon` value is specified by which this rectangle’s dimensions are increased before comparing.

  * Parameters:
  * `rect:` `Rectangle` — the specified rectangle
  * `epsilon:` `Number` — the epsilon against which to compare the rectangle’s dimensions — optional, default: `0`
  * Returns:
  * `Boolean` — `true` if the rectangle and the specified rectangle intersect each other, `false` otherwise

  Example:Checking whether the bounding box of one item intersects with that of another item:

  Run

  ```jsx
  // All newly created paths will inherit these styles:
  project.currentStyle = {
      fillColor: 'green',
      strokeColor: 'black'
  };

  // Create a circle shaped path at {x: 80, y: 50}
  // with a radius of 45.
  var largeCircle = new Path.Circle(new Point(80, 50), 45);

  // Create a smaller circle shaped path in the same position
  // with a radius of 30.
  var circle = new Path.Circle(new Point(80, 50), 30);

  function onMouseMove(event) {
      // Move the circle to the position of the mouse:
      circle.position = event.point;

      // Check whether the bounding box of the two circle
      // shaped paths intersect:
      if (largeCircle.bounds.intersects(circle.bounds)) {
          // If it does, fill it with green:
          circle.fillColor = 'green';
          largeCircle.fillColor = 'green';
      } else {
          // If doesn't, fill it with red:
          circle.fillColor = 'red';
          largeCircle.fillColor = 'red';
      }
  }
  ```

### Boolean Operations

* `intersect(rect)`

  Returns a new rectangle representing the intersection of this rectangle with the specified rectangle.

  * Parameters:
  * `rect:` `Rectangle` — the rectangle to be intersected with this rectangle
  * Returns:
  * `Rectangle` — the largest rectangle contained in both the specified rectangle and in this rectangle

  Example:Intersecting two rectangles and visualizing the result using rectangle shaped paths:

  Run

  ```jsx
  // Create two rectangles that overlap each other
  var size = new Size(50, 50);
  var rectangle1 = new Rectangle(new Point(25, 15), size);
  var rectangle2 = new Rectangle(new Point(50, 40), size);

  // The rectangle that represents the intersection of the
  // two rectangles:
  var intersected = rectangle1.intersect(rectangle2);

  // To visualize the intersecting of the rectangles, we will
  // create rectangle shaped paths using the Path.Rectangle
  // constructor.

  // Have all newly created paths inherit a black stroke:
  project.currentStyle.strokeColor = 'black';

  // Create two rectangle shaped paths using the abstract rectangles
  // we created before:
  new Path.Rectangle(rectangle1);
  new Path.Rectangle(rectangle2);

  // Create a path that represents the intersected rectangle,
  // and fill it with red:
  var intersectionPath = new Path.Rectangle(intersected);
  intersectionPath.fillColor = 'red';
  ```
* `unite(rect)`

  Returns a new rectangle representing the union of this rectangle with the specified rectangle.

  * Parameters:
  * `rect:` `Rectangle` — the rectangle to be combined with this rectangle
  * Returns:
  * `Rectangle` — the smallest rectangle containing both the specified rectangle and this rectangle
* `include(point)`

  Adds a point to this rectangle. The resulting rectangle is the smallest rectangle that contains both the original rectangle and the specified point.

  After adding a point, a call to `contains(point)` with the added point as an argument does not necessarily return `true`. The `rectangle.contains(point)` method does not return `true` for points on the right or bottom edges of a rectangle. Therefore, if the added point falls on the left or bottom edge of the enlarged rectangle, `rectangle.contains(point)` returns `false` for that point.

  * Parameters:
  * `point:` `Point`
  * Returns:
  * `Rectangle` — the smallest rectangle that contains both the original rectangle and the specified point
* `expand(amount)`

  Returns a new rectangle expanded by the specified amount in horizontal and vertical directions.

  * Parameters:
  * `amount:` `Number`⟋`Size`⟋`Point` — the amount to expand the rectangle in both directions
  * Returns:
  * `Rectangle` — the expanded rectangle
* `expand(hor, ver)`

  Returns a new rectangle expanded by the specified amounts in horizontal and vertical directions.

  * Parameters:
  * `hor:` `Number` — the amount to expand the rectangle in horizontal direction
  * `ver:` `Number` — the amount to expand the rectangle in vertical direction
  * Returns:
  * `Rectangle` — the expanded rectangle
* `scale(amount)`

  Returns a new rectangle scaled by the specified amount from its center.

  * Parameters:
  * `amount:` `Number`
  * Returns:
  * `Rectangle` — the scaled rectangle
* `scale(hor, ver)`

  Returns a new rectangle scaled in horizontal direction by the specified `hor` amount and in vertical direction by the specified `ver` amount from its center.

  * Parameters:
  * `hor:` `Number`
  * `ver:` `Number`
  * Returns:
  * `Rectangle` — the scaled rectangle


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://paperjs.typogram.co/basic-types/rectangle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.