Using the background() Function in p5.js

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

When you're creating a visual sketch with p5.js, one of the first things you might want to do is to set a background color. You know, to set the mood. A dark, brooding grey for a sketch about the existential dread of modern life, or a cheerful yellow for a sketch about bouncy puppies. The p5.js library gives us a handy function to do just that - background().

What is the background function?

The background() function in p5.js is used to set the color used for the background of your p5.js canvas. This function is usually called within the setup() or draw() functions. It basically gives your canvas a fresh coat of paint.

// sets the background color to white
background(255);

In the example above, the background color is set to white. If you're thinking "Wait a minute. Why is it 255 for white?", check out our article on RGB color values.

Using Colors

The background() function accepts either RGB values, grayscale values or color strings. Let's look at some examples.

// sets the background color to red using RGB values
background(255, 0, 0);

// sets the background color to a moderate gray using a grayscale value
background(122);

// sets the background color to blue using a color string
background('blue');

Note that when using color strings, the strings must be written in lowercase and without spaces. Otherwise, p5.js won't recognize them and will leave you with a default black background. Check out our color naming guide for more on this.

FAQ