Skip to content
Related Articles
Open in App
Not now

Related Articles

p5.js | noCanvas() Function

Improve Article
Save Article
  • Last Updated : 29 May, 2020
Improve Article
Save Article

The noCanvas() function in p5.js is used to remove the default canvas that is created by p5.js. This can be used for sketches that don’t require a canvas. It accepts no parameters.

Syntax:

noCanvas()

Parameters: This function accepts no parameters.

The program below illustrates the noCanvas() function in p5.js:

Example:




function setup() {
  createCanvas(400, 300);
  
  // Create buttons for creating
  // and removing the canvas
  createBtn = createButton("Create Canvas");
  createBtn.position(30, 20);
  createBtn.mouseClicked(createDrawArea);
  
  removeBtn = createButton("Remove Canvas");
  removeBtn.position(30, 50);
  removeBtn.mouseClicked(removeDrawArea);
}
  
function removeDrawArea() {
    
  // Wrap noCanvas() in a try-catch
  // to prevent error in case there
  // exists no canvas to remove
  try {
    noCanvas();
  } catch (e) {
    print("No canvas found to remove");
    print(e);
  }
}
  
function createDrawArea() {
  
  // Create a canvas with the
  // given dimensions
  createCanvas(400, 300);
}
  
function draw() {
  clear();
  background("green");
  textSize(20);
  
  text("This is the canvas area", 50, 130);
  text("Canvas height: " + height, 50, 150);
  text("Canvas width: " + width, 50, 170);
}


Output:

noCanvas-btns

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!