Reference background()

background()

Sets the color used for the background of the canvas.

By default, the background is transparent. background() is typically used within draw() to clear the display window at the beginning of each frame. It can also be used inside setup() to set the background on the first frame of animation.

The version of background() with one parameter interprets the value one of four ways. If the parameter is a Number, it's interpreted as a grayscale value. If the parameter is a String, it's interpreted as a CSS color string. RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the parameter is a p5.Color object, it will be used as the background color. If the parameter is a p5.Image object, it will be used as the background image.

The version of background() with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value.

The version of background() with three parameters interprets them as RGB, HSB, or HSL colors, depending on the current colorMode(). By default, colors are specified in RGB values. Calling background(255, 204, 0) sets the background a bright yellow color.

Examples

Syntax

background(color)
background(colorstring, [a])
background(gray, [a])
background(v1, v2, v3, [a])
background(values)
background(image, [a])

Parameters

color
p5.Color: any value created by the color() function
colorstring
String: color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex.
a
Number: opacity of the background relative to current color range (default is 0-255).
gray
Number: specifies a value between white and black.
v1
Number: red value if color mode is RGB, or hue value if color mode is HSB.
v2
Number: green value if color mode is RGB, or saturation value if color mode is HSB.
v3
Number: blue value if color mode is RGB, or brightness value if color mode is HSB.
values
Number[]: an array containing the red, green, blue and alpha components of the color.
image
p5.Image: image created with loadImage() or createImage(), to set as background. (must be same size as the sketch window).
Notice any errors or typos? Please let us know. Please feel free to edit src/color/setting.js and open a pull request!

Related References