saveCanvas

This page tests saveCanvas on both a normal p5 canvas and a CanvasClass. The code creates a p5 canvas and a CanvasClass shown at the bottom of this page. If you click the button "Save using p5 canvasSave", these 5 commands are issued:

  saveCanvas("myCanvas_p5_1.png");actuall
  saveCanvas(c, "myCanvas_p5_2.png");
  saveCanvas("myCanvas_p5_3", "png");
  saveCanvas(c, "myCanvas_p5_4", "png");
  saveCanvas(can.canvas,  "myCanvas_p5_5.png");

"c" is a normal p5 canvas. "can" is a CanvasClass canvas. The last command shows that the normal saveCanvas works on a CanvasClass if .canvas is used with the canvas name. If one clicks the "Save using CanvasClass canvasSave" button, the following commands are executed using all 4 of the variations on the function call.

  can.saveCanvas("myCanvas_CC_1.png");
  can.saveCanvas(can.canvas, "myCanvas_CC_2.png");
  can.saveCanvas("myCanvas_CC_3", "png");
  can.saveCanvas(can.canvas, "myCanvas_CC_4", "png");

Notice that if specifying the CanvasClass in the 2nd and 4th commands requires specifying can.canvas (or equivalently can.elt). There is little reason to include the canvas name as an argument because it is the default anyway.

When run in most browsers, one will get up to 4 dialog boxes asking about saving the images. They may be asynchronous and seemingly appear in reverse order. If you agree to save them, they will be in whatever folder the browser normally saves downloaded files.

This program has been tested in the following browsers run under Windows 10:

At least in Firefox, one cannot specify an alternate folder when naming the file.

The p5js file save.pjs

James Brink, 6/27/2020 /