shape()

Category:Drawing

Connect the points to draw a shape.

Are not limited to rectangles, ellipses and regular polygons. shape() allows you to draw any shape you want by connecting points. Shapes 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

Star

Draw a star.

// Draw a star.
shape(200, 100, 275, 300, 90, 175, 310, 175, 125, 300);

Syntax

shape(x1, y1, x2, y2, ..., xn, yn) // Pairs of x,y coordinates. Even number of parameters, four or greater.

Parameters

Name	Type	Description
x1	Number	The x-location in pixels of the first point of the shape, from left to right on the display. Should be a number from 0 to 400, but negative numbers will locate the point to the left of the display and numbers greater than 400 will locate the point to the right of the display (possibly unseen).
y1	Number	The y-location in pixels of the first point of the shape, from top to bottom on the display. Should be a number from 0 to 400, but negative numbers will locate the point above the display and numbers greater than 400 will locate the point below the display (possibly unseen).
x2	Number	The x-location in pixels of the second point of the shape, from left to right on the display. Should be a number from 0 to 400, but negative numbers will locate the point to the left of the display and numbers greater than 400 will locate the point to the right of the display (possibly unseen).
y2	Number	The y-location in pixels of the second point of the shape, from top to bottom on the display. Should be a number from 0 to 400, but negative numbers will locate the point above the display and numbers greater than 400 will locate the point below the display (possibly unseen).

Returns

No return value. Outputs to the display only.

Tips

If you're having trouble getting a shape to show up, make sure that noFill() or noStroke() haven't been called, and where you're trying to draw the shape 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 lines, the size of the shape is relative to the center of the perimeter line. The outside perimeter of the shape will be one half the stroke weight larger all around.

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