// saveCanvas() of an off-screen buffer.

// Tested on Mac, Big Sur 11.2.1, Chrome 89.0.4389.90, p5.js 1.3.1

​

// Largest square is 2^14 x 2^14

// Rectangles behave the same, eg. 2^15 x 2^13 is a limit, etc.

​

// Some clunky code in here to show the slow save of large buffers more clearly

​

let xsize = 2**14 + 0;

let ysize = 2**14 + 0;

​

​

function setup() {

  createCanvas(600, 600);

  frameRate(10);   

}

​

function draw() {

  background(220);

  fill(255,0,0);

  textSize(24);

  text("main canvas", 10, 30);

  text("create buf " + xsize + " x " + ysize + " ..", 10, 80 );

  text("save (may take a few seconds for large sizes) ..", 10, 110 );

  text("frame " + frameCount, 10, 140 )

  if(frameCount === 11) {

    buf = createGraphics(xsize, ysize, P2D);

    buf.background(255,128,0);

    let filename = "image-" + xsize + "x" + ysize;

    saveCanvas(buf, filename, "png");

  }

​

  if(frameCount >= 20) {

    text("done.", 10, 170)  

    noLoop();

  }

}