Open In App

p5.js noCanvas() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 16 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads