By default, p5 runs in Global Mode, which means that all p5 functions are in the global scope, and all canvas-related functions apply to a single canvas. p5 can also run in Instance Mode, in which those same functions are methods of an instance of the p5 class. Each instance of p5 may have its own canvas.
To use instance mode, a function must be defined with a parameter representing the p5 instance (labeled p in this example). All the p5 functions and variables that are typically global will belong to this parameter within this function’s scope. Passing the function into the p5 constructor, runs it.
Multiple Canvases by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
Related Examples
Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle.
Create Graphics
Draw imagery off-screen.
Two curving lines made of repeating white circles and squares with black outlines, on a black and white background.
Multiple Canvases
Use Instance Mode to put multiple canvases on the page.
Two spheres broken up into a square grid with a gradient in each grid.
Shader as a Texture
Generate a texture for a 3D shape using a shader.