Skip to content
Related Articles

Related Articles

p5.js | noCanvas() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 29 May, 2020
View Discussion
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
Recommended Articles
Page :

Start Your Coding Journey Now!