p5.js saveCanvas() Function

0 0 1 minute read

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:

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

Environment Setup: https://www.zambiatek.com/p5-js-soundfile-object-installation-and-methods/

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!