🔷 Shapes

Draw rectangles, circles, lines, triangles, and text on your canvas. These are the building blocks of everything you'll make!

rect(x, y, w, h)

Draws a rectangle. You give it the top-left corner position, width, and height.

Parameter	Type	Description
`x`	`number`	X position of the top-left corner
`y`	`number`	Y position of the top-left corner
`w`	`number`	Width
`h`	`number`	Height

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  fill("dodgerblue");
  rect(50, 50, 150, 100);

  fill("tomato");
  rect(220, 80, 80, 80);
}

circle(x, y, r)

Draws a circle. You give it the center position and the radius (half the diameter).

Parameter	Type	Description
`x`	`number`	X position of the center
`y`	`number`	Y position of the center
`r`	`number`	Radius (distance from center to edge)

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  fill("mediumseagreen");
  circle(200, 150, 80);

  fill("gold");
  circle(120, 100, 30);
  circle(280, 100, 30);
}

line(x1, y1, x2, y2)

Draws a straight line between two points.

Parameter	Type	Description
`x1`	`number`	X of the start point
`y1`	`number`	Y of the start point
`x2`	`number`	X of the end point
`y2`	`number`	Y of the end point

Tip: Lines only use stroke color, not fill. Use strokeWeight() to make them thicker.

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  stroke("black");
  strokeWeight(3);
  line(50, 250, 350, 50);

  stroke("tomato");
  strokeWeight(2);
  line(50, 50, 350, 250);
}

triangle(x1, y1, x2, y2, x3, y3)

Draws a triangle using three corner points.

Parameter	Type	Description
`x1`	`number`	X of the first corner
`y1`	`number`	Y of the first corner
`x2`	`number`	X of the second corner
`y2`	`number`	Y of the second corner
`x3`	`number`	X of the third corner
`y3`	`number`	Y of the third corner

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  fill("mediumseagreen");
  triangle(200, 50, 100, 250, 300, 250);
}

text(str, x, y)

Draws text on the canvas at the given position.

Parameter	Type	Description
`str`	`string`	The text to display
`x`	`number`	X position
`y`	`number`	Y position (top of the text)

Tip: Use textSize() before text() to change how big the letters are. The default text size is 12.

function setup() {
  size(400, 200);
}

function draw() {
  background("white");
  fill("black");
  textSize(32);
  text("Hello!", 140, 40);

  fill("dodgerblue");
  textSize(18);
  text("You can draw text too.", 100, 100);
}

ellipse(x, y, w, h)

Draws an oval (ellipse) centered at a point. You give it the center, width, and height.

Parameter	Type	Description
`x`	`number`	X position of the center
`y`	`number`	Y position of the center
`w`	`number`	Width of the oval
`h`	`number`	Height of the oval

Tip: An ellipse with equal width and height is just a circle! But ellipse lets you make ovals and egg shapes.

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  fill("dodgerblue");
  ellipse(200, 150, 200, 100);

  fill("tomato");
  ellipse(200, 150, 80, 140);
}

arc(x, y, r, startAngle, stopAngle)

Draws part of a circle (an arc). Angles are in degrees — 0 is right, 90 is down, 180 is left, 270 is up.

Parameter	Type	Description
`x`	`number`	X position of the center
`y`	`number`	Y position of the center
`r`	`number`	Radius of the arc
`startAngle`	`number`	Starting angle in degrees
`stopAngle`	`number`	Ending angle in degrees

Tip: Use arc to draw pac-man shapes, pie charts, or curved lines! 0 to 360 would draw a full circle.

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  fill("gold");
  arc(200, 150, 80, 30, 330);

  noFill();
  stroke("tomato");
  strokeWeight(4);
  arc(200, 150, 100, 0, 180);
}