​

function setup() {

  createCanvas(400, 400);

​

  // Position images using

  // center coordinates.

  imageMode(CENTER);

​

  // Create the p5.Graphics buffer object

  // with a same size as the canvas.

  garden = createGraphics(400, 400);

​

  // Give the graphics object a

  // semi transparent green background.

  garden.background(0, 255, 0, 100);

}

​

function draw() {

  background(255);

​

  // A black circle rendered

  // on the original canvas.

  fill(0);

  circle(width / 2, height / 2, 100);

​

  // A hollow circle rendered

  // on the graphics object.

  garden.noFill();

  garden.stroke(0);

  garden.circle(width / 2, height / 2, 100);

​

  // Draw the graphics object to follow the cursor.

  image(garden, mouseX, mouseY);

​

  // ! Switch on to place graphics object

  // in the middle of the canvas.

  // image(garden, width/2, height/2);

}

​