// Linked from 

//  https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079

// Greg E, 20 Sep 19

​

let canvas = null, buffer = null, tgt = null;

let midx = 0, midy = 0;

let maxFrames = 300;

​

​

function setup() {

  canvas = createCanvas(800, 600, P2D);

  buffer = createGraphics(800, 600, P2D); 

}

​

function draw() {

  midx = canvas.width/2;

  midy = canvas.height/2;

// Render onscreen canvas.

​

  tgt = canvas;

  canvas.colorMode(RGB);                        // ??? doesn't exist, no such bound function

  tgt.colorMode(RGB);                           // ??? doesn't exist, no such bound function

  colorMode(RGB);

  tgt.background(128, 255, 128);                // light green

  tgt.fill(0, 128, 0);                          // dark green

  tgt.ellipse(midx, midy-100, 100, 50);         // ??? tgt.ellipse doesn't abort, but doesn't draw

  ellipse(midx, midy-100, 100, 50);         

  // tgt.circle(midx, midy, 100);               // ??? tgt.circle doesn't exist

  circle(midx, midy, 100);                      

  // tgt.square(midx-150, midy-50, 100);        // ??? tgt.square doesn't exist

  square(midx-150, midy-50, 100);               

  tgt.textSize(30);

  tgt.strokeWeight(0);

  tgt.text("normal canvas", midx, midy);

  tgt.text("click the mouse", midx, midy + 100);

​

// Render offscreen buffer. This all works fine.

  tgt = buffer;

  tgt.colorMode(RGB);

  tgt.background(255, 128, 0);                  // orange

  tgt.fill(255, 0, 0);                          // red

  tgt.ellipse(midx, midy-100, 50, 100);        

  tgt.circle(midx, midy, 100);

  tgt.square(midx-150, midy-50, 100);

​

  tgt.textSize(30);

  tgt.strokeWeight(0);

  tgt.fill(0);                                  // black

  tgt.text("offscreen buffer", midx, midy);

​

// If mouse pressed, copy off-screen buffer back to main canvas.

  if (mouseIsPressed) image(buffer, 0, 0);

​

​

// Some feedback to viewer  

​

  text("frame " + frameCount + " of " + maxFrames, midx, midy + 50);

  if(frameCount >= maxFrames) {

    text("finished", midx, midy + 150);

    noLoop();

  }

​

}