rect()

Category:Drawing

Draws a rectangle onto the display positioned at x and y with sides length w(idth) and h(eight).

You can draw many things with the commands in the Drawing drawer of your Game Lab toolbox. For rect(), the x and y coordinates specify the upper left of the rectangle, relative to the top-left corner of the display area (x:0 y:0). The width and height are measured in pixels. Rectangles are drawn using the current stroke weight and current stroke color, and then filled with the current fill color (unless noStroke() or noFill() commands have been run).

Examples

Thick Outline

Change the thickness of the rectangle outline.

// Change the thickness of the rectangle outline.
strokeWeight(20);
rect(50, 50, 100, 200);

Two Rectangles

Draw two rectangles at the same location and with the same width and height but with different stroke widths and no fill color.

// Draw two rectangles at the same location and with the same width and height but with different stroke widths and no fill color.
strokeWeight(40);
stroke("lightblue");
noFill();
rect(50, 50, 100, 200);
strokeWeight(1);
stroke("black");
rect(50, 50, 100, 200);

Part of a Rectangle

Start a large rectangle off the display so that only part of the rectangle is visible.

// Start a large rectangle off the display so that only part of the rectangle is visible.
strokeWeight(15);
rect(60, -15, 50, 500);

Animated Box

Use the draw() function to animate a moving and growing box.

                            // Use the draw() function to animate a moving and growing box.
var number = 0;
function draw() {
  background("white");
  rect(number, number, number, number);
  if (number<200) {
    number=number+1;
  }
}

Big Blue Box

Draw a blue rectangle offset from the top left corner.

// Draw a blue rectangle offset from the top left corner.
fill("blue");
rect(50, 50, 200, 100);

// Draw a 100x100 pixel rectangle in the top left corner.
rect(0, 0, 100, 100);

Syntax

rect(x, y, w, h)

Parameters

Name	Type	Description
x	Number	The x-location in pixels of the upper left corner of the rectangle from left to right on the display. Should be a number from 0 to 400, but negative numbers will start the rectangle to the left of the display and numbers greater than 400 will start the rectangle to the right of the display (possibly unseen).
y	Number	The y-location in pixels of the upper left corner of the rectangle from top to bottom on the display. Should be a number from 0 to 400, but negative numbers will start the rectangle above the display and numbers greater than 400 will start the rectangle below the display (possibly unseen).
w	Number	The horizontal width in pixels of the rectangle. Should be a positive number, but negative numbers will draw the rectangle to the left of the (x,y) upper left corner position.
h	Number	The vertical height in pixels of the rectangle. Should be a positive number, but negative numbers will draw the rectangle above the (x,y) upper left corner position.

Returns

No return value. Outputs to the display only.

Tips

If you're having trouble getting a rectangle to show up, make sure that noFill() or noStroke() haven't been called, and where you're trying to draw the rectangle fits within the coordinates of the display (400 x 400).
Anything you draw will overlap previous things you drew. The sequence of drawing statements is usually important.
The default stroke is black, the default stroke weight is 1 pixel, and the default fill is gray. Change the width of the line, color of the line, and fill color used to draw all subsequent shapes using strokeWeight(), stroke(). and fill().
When drawing thick borders, the width and length of the rectangle is relative to the center of the perimeter line. The outside perimeter of the rectangle will be one half the stroke weight larger all around.

Found a bug in the documentation? Let us know at documentation@code.org