# rect()

### Example

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FkVi1mrlT1AgD96ZsqhpD%2Funtitled%20\(9\)%20\(1\).png?alt=media\&token=e6d3fe90-f143-4b82-999e-45d420a78678)

```python
rect(100, 150, 200, 100)
```

### Syntax

#### Basic Inputs

```python
rect(x, y, width, height)
```

<table><thead><tr><th width="167">Input</th><th>Description</th></tr></thead><tbody><tr><td>x</td><td>x co-ordinate of the bottom left corner</td></tr><tr><td>y</td><td>y co-ordinate of the bottom left corner</td></tr><tr><td>width</td><td>width of the rectangle (length in x direction)</td></tr><tr><td>height</td><td>height of the rectangle (length in y direction)</td></tr></tbody></table>

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FbBLzPuOqULaEFfJKbMfR%2Fimage.png?alt=media&#x26;token=077d7915-4c46-456e-b285-3e6cb8c22066" alt=""><figcaption></figcaption></figure>

#### Curved Corners Optional Inputs

```
rect(x, y, width, height, topleft, topright, bottomright, bottomleft)
```

<table><thead><tr><th width="167">Input</th><th>Description</th></tr></thead><tbody><tr><td>x</td><td>x co-ordinate of the bottom left corner</td></tr><tr><td>y</td><td>y co-ordinate of the bottom left corner</td></tr><tr><td>width</td><td>width of the rectangle (length in x direction)</td></tr><tr><td>height</td><td>height of the rectangle (length in y direction)</td></tr><tr><td>bottomleft</td><td>radius of circle of curvature for the bottom left corner</td></tr><tr><td>bottomright</td><td>radius of circle of curvature for the bottom right corner</td></tr><tr><td>topright</td><td>radius of circle of curvature for the top right corner</td></tr><tr><td>topleft</td><td>radius of circle of curvature for the top left corner</td></tr></tbody></table>

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FFm92x7xkIpvUI52xV3aB%2Fimage.png?alt=media&#x26;token=99a08de0-4b35-4df5-a9bd-a09e462126ff" alt=""><figcaption></figcaption></figure>

### Description

**rect()** draws a rectangle on the canvas, using the inputs to determine the position and dimension of the shape. The corners can be given a curvature in order to draw a **'rounded rectangle'**, but the base and height of the rectangle must always be parallel to the x-axis and y-axis respectively - this can only be changed separately with a rotation.

## Modes <a href="#modes" id="modes"></a>

By default, the **x** and **y** inputs refer to the bottom left corner of the rectangle.

This can be changed using `rectMode()`, with an input of **CORNER**, **CORNERS**, **RADIUS** or **CENTER.**

#### rectMode(CORNER)

This is the default mode. The code:

```python
rect(x, y, width, height)
```

will use **(x,y)** as the bottom left corner coordinates and **width** and **height** as the dimensions.

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FH7jnWwV1HrCuiLhMKYZf%2Fimage.png?alt=media\&token=d359c24f-f9ba-48ae-ae2d-e40186b83c0a)

#### rectMode(CORNERS)

This mode is for specifying the coordinates of opposite corners. The code:

```python
rect(x1, y2, x2, y2)
```

will use **(x1,y1)** as the bottom left corner coordinates and **(x2,y2)** as the top right (diagonally opposite) corner coordinates.

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Ff8nM5e2QGvkKSTqcBCv6%2Fimage%20\(1\).png?alt=media\&token=7f95123f-0849-4db6-8d2e-d2fa50ed0f50)

#### rectMode(CENTER)

This mode is for specifying the **center** of the rectangle together with the **width** and **height**. The code:

```python
rect(x, y, width, height)
```

will use **(x,y)** as the center coordinates and **width** and **height** as the dimensions.

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FJ1FmcfCIdaaSCnFmX8NF%2Fimage%20\(2\).png?alt=media\&token=bbe1c159-f4ce-44fb-b885-aecb3ca9500f)

#### rectMode(RADIUS)

This mode is for specifying the **center** of the rectangle together with **half the width** and **half the height**. The code:

```python
rect(x, y, wRadius, hRadius)
```

will use **(x,y)** as the center coordinates and **wRadius \* 2** and **hRadius \* 2** as the dimensions.

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FGC1q5mTekbZbdSklMi8e%2Fimage%20\(3\).png?alt=media\&token=40ccbbe5-d6db-4c23-90ea-4edb9834f00a)

{% hint style="info" %}
Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)<mark style="color:blue;">**!**</mark>

We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link).
{% endhint %}