p5.js | saveCanvas() Function

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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')
}

chevron_right


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

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.