imagecanvaspngjpegp5.js

How do I save a p5.js canvas as a very large PNG?


I know how to save the canvas using p5.js. However I want to save the canvas as a very large png (for example 8000x8000) so that I can use it in Photoshop and scale down the image to the appropriate size. Is there a simple way of doing this besides creating a new canvas behind the scenes that is too large for the browser window?


Solution

  • You could use the createGraphics() function to create an off-screen buffer. Then you can draw it to the screen using the image() function, or you can call its save() function to store it as a file. Here's an example:

    let pg;
    
    function setup() {
      createCanvas(400, 400);
      pg = createGraphics(4000, 4000);
      pg.background(32);
    }
    
    function draw() {
      pg.ellipse(random(pg.width), random(pg.height), 100, 100);
      image(pg, 0, 0, width, height);
    }
    
    function mousePressed(){
     pg.save("pg.png"); 
    }