A class to describe a drawing surface that's separate from the main canvas.
Each p5.Graphics object provides a dedicated drawing surface called a graphics buffer. Graphics buffers are helpful when drawing should happen offscreen. For example, separate scenes can be drawn offscreen and displayed only when needed.
p5.Graphics objects have nearly all the drawing features of the main canvas. For example, calling the method myGraphics.circle(50, 50, 20) draws to the graphics buffer. The resulting image can be displayed on the main canvas by passing the p5.Graphics object to the image() function, as in image(myGraphics, 0, 0).
Note: createGraphics() is the recommended way to create an instance of this class.
Examples
Syntax
p5.Graphics(width, height, renderer, [pInst], [canvas])Parameters
width of the graphics buffer in pixels.
height of the graphics buffer in pixels.
renderer to use, either P2D or WEBGL.
sketch instance.
existing <canvas> element to use.
Methods
Resets the graphics buffer's transformations and lighting.
By default, the main canvas resets certain transformation and lighting values each time draw() executes. p5.Graphics objects must reset these values manually by calling myGraphics.reset().
Removes the graphics buffer from the web page.
Calling myGraphics.remove() removes the graphics buffer's element from the web page. The graphics buffer also uses a bit of memory on the CPU that can be freed like so:
// Remove the graphics buffer from the web page.
myGraphics.remove();
// Delete the graphics buffer from CPU memory.
myGraphics = undefined;
Note: All variables that reference the graphics buffer must be assigned the value undefined to delete the graphics buffer from CPU memory. If any variable still refers to the graphics buffer, then it won't be garbage collected.
Creates a new p5.Framebuffer object with the same WebGL context as the graphics buffer.
p5.Framebuffer objects are separate drawing surfaces that can be used as textures in WebGL mode. They're similar to p5.Graphics objects and generally run much faster when used as textures. Creating a p5.Framebuffer object in the same context as the graphics buffer makes this speedup possible.
The parameter, options, is optional. An object can be passed to configure the p5.Framebuffer object. The available properties are:
format: data format of the texture, eitherUNSIGNED_BYTE,FLOAT, orHALF_FLOAT. Default isUNSIGNED_BYTE.channels: whether to storeRGBorRGBAcolor channels. Default is to match the graphics buffer which isRGBA.depth: whether to include a depth buffer. Default istrue.depthFormat: data format of depth information, eitherUNSIGNED_INTorFLOAT. Default isFLOAT.stencil: whether to include a stencil buffer for masking.depthmust betruefor this feature to work. Defaults to the value ofdepthwhich istrue.antialias: whether to perform anti-aliasing. If set totrue, as in{ antialias: true }, 2 samples will be used by default. The number of samples can also be set, as in{ antialias: 4 }. Default is to match setAttributes() which isfalse(truein Safari).width: width of the p5.Framebuffer object. Default is to always match the graphics buffer width.height: height of the p5.Framebuffer object. Default is to always match the graphics buffer height.density: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density.textureFiltering: how to read values from the p5.Framebuffer object. EitherLINEAR(nearby pixels will be interpolated) orNEAREST(no interpolation). Generally, useLINEARwhen using the texture as an image andNEARESTif reading the texture as data. Default isLINEAR.
If the width, height, or density attributes are set, they won't automatically match the graphics buffer and must be changed manually.