> For the complete documentation index, see [llms.txt](https://learnpython.strivemath.com/p5-python-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/rect.md).

# rect()

### Example

![](/files/qbz3k2SxkmkdFpgiVF5g)

```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="/files/1nLA2lG3DXV0qP1NbIHV" 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="/files/MfzDQwzuvtnw3tRMarPl" 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.

![](/files/shG4i6oTQ06TP16i5bXN)

#### 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.

![](/files/hmIe2jga8QfwEhNfqaLD)

#### 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.

![](/files/2Nq9kgvJDAoEWfC5B08E)

#### 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.

![](/files/WMb5vr5w2oKOcjeizIVw)

{% 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 %}