p5.js noFill() Function

Last Updated : 11 Aug, 2023

The noFill() function is used to disable the filling geometry. If noStroke() and noFill() function are called simultaneously then nothing will be drawn on the screen. Syntax:

noFill()

Parameters: This function does not accept any parameter. Below examples illustrate the noFill() function in p5.js: Example 1:

javascript

function setup() { 
    
    // Create Canvas of given size 
    createCanvas(400, 300); 
} 

function draw() { 
    
    // Set the background color 
    background(220); 
    
    // Use fill() function to fill color
    fill('green')
    // Draw a line 
    rect(50, 50, 150, 150); 
    
    // Use noFill() function
    noFill();
  
    // Draw a line 
    rect(100, 100, 150, 150); 
}

Output:

Example 2:

javascript

function setup() { 
    
    // Create Canvas of given size 
    createCanvas(400, 300); 
} 

function draw() { 
    
    // Set the background color 
    background(220); 
    
    // Use noFill() function
    noFill();
    
    // Draw a line 
    circle(140, 100, 150);
    
    // Use fill() function to fill color
    fill('green')
    // Draw a line 
    circle(240, 100, 150); 
}

Output:

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

p5.js Color Complete Reference

jit_t

Improve

Article Tags :

p5.js noFill() Function

Similar Reads

p5.js Environment

p5.js Color

p5.js Shape

p5.js Constants and Structure

p5.js DOM and Rendering

p5.js Transform

p5.js Data

p5.js Events

Thank You!

What kind of Experience do you want to share?