HTTP/2 200 date: Sat, 11 Oct 2025 10:30:56 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=r17LM6Fr%2BAzRdZGePgZI8kkFW%2FJFq8uWSuaJOqX3pme9m08Bxiv3z%2FvEUAVzZ1p79oK2lh%2FT7S6jU5pwmOGaOrb8uzq%2FeVirI4qL1NQ%3D"}]} content-encoding: gzip cf-ray: 98cdaf566f6f84a1-BOM alt-svc: h3=":443"; ma=86400

Processing.js

CreateGraphics

The createGraphics() function creates an object from the PGraphics class (PGraphics is the main graphics and rendering context for Processing). The beginDraw() method is necessary to prepare for drawing and endDraw() is necessary to finish. Use this class if you need to draw into an off-screen graphics buffer or to maintain two contexts with different properties.

Original Processing.org Example: CreateGraphics

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
PGraphics pg;
void setup() {
  size(200, 200);
  pg = createGraphics(80, 80, P3D);
}
void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  
  pg.beginDraw();
  pg.background(102);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-60, mouseY-60, 60, 60);
  pg.endDraw();
  
  image(pg, 60, 60); 
}