🎨 Colors & Style

Control how shapes look — their fill color, outline color, and line thickness. Colors can be names like "tomato", hex codes like "#ff0000", or a number 0–255 for shades of gray.

fill(color)

Sets the fill color for shapes drawn after this call. Shapes will be filled with this color until you change it.

Parameter	Type	Description
`color`	`color`	A color name, hex code, or number 0–255 for gray

Tip: You can use any CSS color name: "red", "skyblue", "gold", "purple", "hotpink" — there are over 140 to choose from! See them all on the Color Names page.

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

function draw() {
  background("white");
  fill("tomato");
  circle(100, 100, 50);

  fill("dodgerblue");
  circle(200, 100, 50);

  fill("mediumseagreen");
  circle(300, 100, 50);
}

stroke(color)

Sets the outline color for shapes drawn after this call.

Parameter	Type	Description
`color`	`color`	A color name, hex code, or number 0–255 for gray

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

function draw() {
  background("white");
  fill("white");
  stroke("tomato");
  strokeWeight(4);
  circle(100, 100, 50);

  stroke("dodgerblue");
  circle(200, 100, 50);

  stroke("mediumseagreen");
  circle(300, 100, 50);
}

noFill

Turns off fill for shapes, so only their outline shows.

Tip: Call fill() again to turn fill back on.

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

function draw() {
  background("white");
  noFill();
  stroke("black");
  strokeWeight(3);
  circle(100, 100, 50);
  rect(170, 50, 100, 100);
  triangle(330, 50, 280, 150, 380, 150);
}

noStroke

Turns off the outline for shapes.

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

function draw() {
  background("white");
  noStroke();
  fill("dodgerblue");
  circle(100, 100, 60);

  fill("tomato");
  rect(200, 50, 100, 100);
}

strokeWeight(weight)

Sets how thick outlines and lines are, in pixels.

Parameter	Type	Description
`weight`	`number`	Thickness in pixels

Tip: The default stroke weight is 1. Bigger numbers = thicker lines.

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

function draw() {
  background("white");
  stroke("black");

  strokeWeight(1);
  line(50, 40, 350, 40);

  strokeWeight(4);
  line(50, 80, 350, 80);

  strokeWeight(10);
  line(50, 130, 350, 130);

  strokeWeight(20);
  line(50, 180, 350, 180);
}

textSize(size)

Sets the size of text drawn with text(), in pixels.

Parameter	Type	Description
`size`	`number`	Text size in pixels

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

function draw() {
  background("white");
  fill("black");

  textSize(12);
  text("Small (12)", 20, 20);

  textSize(24);
  text("Medium (24)", 20, 60);

  textSize(48);
  text("Big (48)", 20, 110);
}

textAlign(align)

Sets how text lines up with the x position you give to text(). "left" is the default, "center" centers on x, "right" ends at x.

Parameter	Type	Description
`align`	`string`	"left", "center", or "right"

Tip: textAlign("center") is perfect for titles and score displays — just use width/2 as the x position!

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

function draw() {
  background("white");
  stroke("tomato");
  line(200, 0, 200, 200);

  fill("black");
  textSize(18);

  textAlign("left");
  text("Left aligned", 200, 30);

  textAlign("center");
  text("Centered", 200, 80);

  textAlign("right");
  text("Right aligned", 200, 130);
}