createGraphics()

Creates a p5.Graphics object.

createGraphics() creates an offscreen drawing canvas (graphics buffer) and returns it as a p5.Graphics object. Drawing to a separate graphics buffer can be helpful for performance and for organizing code.

The first two parameters, width and height, are optional. They set the dimensions of the p5.Graphics object. For example, calling createGraphics(900, 500) creates a graphics buffer that's 900×500 pixels.

The third parameter is also optional. If either of the constants P2D or WEBGL is passed, as in createGraphics(900, 500, WEBGL), then it will set the p5.Graphics object's rendering mode. If an existing HTMLCanvasElement is passed, as in createGraphics(900, 500, myCanvas), then it will be used by the graphics buffer.

The fourth parameter is also optional. If an existing HTMLCanvasElement is passed, as in createGraphics(900, 500, WEBGL, myCanvas), then it will be used by the graphics buffer.

Note: In WebGL mode, the p5.Graphics object will use a WebGL2 context if it's supported by the browser. Check the webglVersion system variable to check what version is being used, or call setAttributes({ version: 1 }) to create a WebGL1 context.