Let’s add color to our shapes!

The first style function for shapes you should know is the fill() function. fill() allows us to set the fill color, or the inside color of a shape. The default fill color for shapes is white and all shapes, except for points and line, have a fill. The fill() function must be called prior to calling the shape function.

We can set the fill color of shapes by calling the fill() function and passing color arguments like for the background() function. This will set the active fill color until the fill() function is called again with a different color argument.

fill() example

To disable the fill of a shape and make the fill transparent, you can call the noFill() function.

noFill() example



In the p5.js sketch to the right, set the top-left circle’s fill to blue using the RGB notation by calling the fill() function before it is drawn.


Set the top-right rectangle’s fill to black and with an alpha value of 40.


Next, set the bottom-left triangle to 'purple' with the fill() function.


Set the bottom-right circle to transparent using the noFill() function.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?