rect()

Rectangle - Draws a rectangle with the given inputs

Example

rect(100, 150, 200, 100)

Syntax

Basic Inputs

rect(x, y, width, height)

Input	Description
x	x co-ordinate of the bottom left corner
y	y co-ordinate of the bottom left corner
width	width of the rectangle (length in x direction)
height	height of the rectangle (length in y direction)

Curved Corners Optional Inputs

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

Input	Description
x	x co-ordinate of the bottom left corner
y	y co-ordinate of the bottom left corner
width	width of the rectangle (length in x direction)
height	height of the rectangle (length in y direction)
bottomleft	radius of circle of curvature for the bottom left corner
bottomright	radius of circle of curvature for the bottom right corner
topright	radius of circle of curvature for the top right corner
topleft	radius of circle of curvature for the top left corner

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

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:

rect(x, y, width, height)

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

rectMode(CORNERS)

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

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.

rectMode(CENTER)

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

rect(x, y, width, height)

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

rectMode(RADIUS)

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

rect(x, y, wRadius, hRadius)

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

Find these documents helpful? Let the people who made them help your child learn to code at Strivemath!

We'd love to hear your Feedback/Comments here.