p5.js clear() function

The clear() function in p5.js is used to clear the pixels within a buffer. This function only clears the canvas. This function clears everything to make all of the pixels 100% transparent. It can be used to reset the drawing canvas.

Syntax:

clear()

Parameters: This function does not accept any parameter.

Below program illustrates the clear() function in p5.js:

Example: This example uses clear() function to clear the canvas.

function setup() {

    // Create canvas
    createCanvas(700, 700);
}

function draw() {

    noStroke();

    // Draw Ellipse at mouseX and mouseY
    ellipse(mouseX, mouseY, 20, 20);

    // Set color of the ellipse
    fill('green');

    // Set the text size
    textSize(20);

    // Set the text
    text("Press Mouse To Clear The Screen", 20, 30);
}

// Define the mousePressed function
function mousePressed() {
    clear();
}

Output:
Before Clicking the mouse button:

After Clicking the mouse button:

Reference: https://p5js.org/reference/#/p5/clear