Skip to content
Related Articles

Related Articles

Improve Article

p5.js | saveCanvas() Function

  • Last Updated : 18 Mar, 2020
Geek Week

The saveCanvas() function is used to save a p5.Table object to a file. The format of the file saved can be defined as a parameter to the function. It saves a text file with comma-separated-values by default, however, it can be used to save it using-tab separated-values or generate an HTML table from it.

Syntax:

saveCanvas(selectedCanvas, filename, extension)
saveCanvas(filename, extension)

Parameters: This function accepts three parameter as mentioned above and described below.

  • selectedCanvas: This is a p5.Table object that would be saved to the file.
  • filename: It specifies the string that is used as the filename of the saved file. It is an optional parameter.
  • extension: It is a string which denotes the extension of the file to be saved. It is an optional parameter.

Below example illustrates the saveCanvas() function in p5.js:

Example:






function preload() {
  img = loadImage('sample-image.png');
}
  
function setup() {
  createCanvas(600, 300);
  textSize(22);
  
  background("orange");
  text("Click on the button to save the"+
       " current canvas to file", 20, 40);
  image(img, 30, 60);
  
  // Create a button for saving the canvas
  removeBtn = createButton("Save Canvas");
  removeBtn.position(30, 200)
  removeBtn.mousePressed(saveToFile);
}
  
function saveToFile() {
  // Save the current canvas to file as png
  saveCanvas('mycanvas', 'png')
}

Output:

save-canvas

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!

My Personal Notes arrow_drop_up
Recommended Articles
Page :