p5.js noCanvas() Function

Last Updated : 16 Aug, 2023

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:

javascript

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

p5.js blendMode() Function

sayantanm19

Improve

Article Tags :

p5.js noCanvas() 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?