Drawing Shapes

P5 allows you to draw shapes on the canvas. You can draw circles, rectangles, lines, triangles, and more. You can also change the color of the shapes and the thickness of the outlines.

Basic shapes
ellipse(100, 100, 100, 300);
circle(400, 300, 40);
rect(500, 400, 200, 150);
line(30, 50, 400, 500);

Colors

You can change the color of the shapes and the thickness of the outlines. You can do this with the fill(), stroke() and strokeWeight() functions. The fill() function sets the color of the shapes. The stroke() function sets the color of the outlines. The strokeWeight() function sets the thickness of the outlines.

// everything drawn after this function will be color (255,200, 10)
fill(255, 200, 10); 
ellipse(100, 100, 100, 300);
circle(400, 300, 40);

// outline everything drawn after this function will be color (40,200, 100)
stroke(40, 200, 100); 
rect(500, 400, 200, 150);

// Everything is drawn with thick outlines
strokeWeight(3);
line(30, 50, 400, 500);

// Reset appearance for the next frame
fill(255);
stroke(0);
strokeWeight(1);
fill, stroke and strokeWeight