class Renderer extends PIXI.AbstractRenderer

The Renderer draws the scene and all its content onto a WebGL enabled canvas.

This renderer should be used for browsers that support WebGL.

This renderer works by automatically managing WebGLBatchesm, so no need for Sprite Batches or Sprite Clouds. Don't forget to add the view to your DOM or you will not see anything!

Renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a renderer:

System Description
PIXI.BatchSystem This manages object renderers that defer rendering until a flush.
PIXI.ContextSystem This manages the WebGL context and extensions.
PIXI.EventSystem This manages UI events.
PIXI.FilterSystem This manages the filtering pipeline for post-processing effects.
PIXI.FramebufferSystem This manages framebuffers, which are used for offscreen rendering.
PIXI.GeometrySystem This manages geometries & buffers, which are used to draw object meshes.
PIXI.MaskSystem This manages masking operations.
PIXI.ProjectionSystem This manages the projectionMatrix, used by shaders to get NDC coordinates.
PIXI.RenderTextureSystem This manages render-textures, which are an abstraction over framebuffers.
PIXI.ScissorSystem This handles scissor masking, and is used internally by MaskSystem
PIXI.ShaderSystem This manages shaders, programs that run on the GPU to calculate 'em pixels.
PIXI.StateSystem This manages the WebGL state variables like blend mode, depth testing, etc.
PIXI.StencilSystem This handles stencil masking, and is used internally by MaskSystem
PIXI.TextureSystem This manages textures and their resources on the GPU.
PIXI.TextureGCSystem This will automatically remove textures from the GPU if they are not used.

The breadth of the API surface provided by the renderer is contained within these systems.


new PIXI.Renderer(options: IRendererOptions) → {}
Name Type Attributes Default Description
options IRendererOptions


The optional renderer parameters.

options.width number



The width of the screen.

options.height number



The height of the screen.

options.view HTMLCanvasElement


The canvas to use as a view, optional.

options.useContextAlpha boolean



Pass-through value for canvas' context alpha property. If you want to set transparency, please use backgroundAlpha. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices.

options.autoDensity boolean



Resizes renderer view in CSS pixels to allow for resolutions other than 1.

options.antialias boolean



Sets antialias. If not available natively then FXAA antialiasing is used.

options.resolution number



The resolution / device pixel ratio of the renderer.

options.clearBeforeRender boolean



This sets if the renderer will clear the canvas or not before the new render pass. If you wish to set this to false, you must set preserveDrawingBuffer to true.

options.preserveDrawingBuffer boolean



Enables drawing buffer preservation, enable this if you need to call toDataUrl on the WebGL context.

options.backgroundColor number



The background color of the rendered area (shown if not transparent).

options.backgroundAlpha number



Value from 0 (fully transparent) to 1 (fully opaque).

options.powerPreference string


Parameter passed to WebGL context, set to "high-performance" for devices with dual graphics card.

options.context object


If WebGL context already exists, all parameters must be taken from it.


Events from Renderer

Public Properties

__plugins Renderer.ts:610
static __plugins: IRendererPlugins

Collection of installed plugins. These are included by default in PIXI, but can be excluded by creating a custom build. Consult the README for more information about creating custom builds and excluding plugins.

Name Type Description
accessibility PIXI.AccessibilityManager

Support tabbing interactive elements.

batch PIXI.BatchRenderer

Batching of Sprite, Graphics and Mesh objects.

extract PIXI.Extract

Extract image data from renderer.

interaction PIXI.InteractionManager

Handles mouse, touch and pointer events.

particle PIXI.ParticleRenderer

Renderer for ParticleContainer objects.

prepare PIXI.Prepare

Pre-render display objects.

tilingSprite PIXI.TilingSpriteRenderer

Renderer for TilingSprite objects.

batch Renderer.ts:188
batch: PIXI.BatchSystem

Batch system instance

buffer Renderer.ts:134
buffer: PIXI.BufferSystem

Buffer system instance

context Renderer.ts:110
context: PIXI.ContextSystem

Context system instance

CONTEXT_UID Renderer.ts:87

Unique UID assigned to the renderer's WebGL context.

extract Renderer.ts:595
extract: PIXI.Extract
Deprecated: since 6.0.0

Please use plugins.extract instead.

filter Renderer.ts:176
filter: PIXI.FilterSystem

Filter system instance

framebuffer Renderer.ts:146
framebuffer: PIXI.FramebufferSystem

Framebuffer system instance

geometry Renderer.ts:140
geometry: PIXI.GeometrySystem

Geometry system instance

gl Renderer.ts:77
gl: WebGLRenderingContext

WebGL context, set by this.context.

globalUniforms Renderer.ts:84
globalUniforms: PIXI.UniformGroup

Global uniforms

mask Renderer.ts:104
mask: PIXI.MaskSystem

Mask system instance

multisample Renderer.ts:97
multisample: PIXI.MSAA_QUALITY

The number of msaa samples of the canvas.

projection Renderer.ts:164
projection: PIXI.ProjectionSystem

Projection system instance

renderingToScreen Renderer.ts:90
renderingToScreen: boolean = true

Flag if we are rendering to the screen vs renderTexture

renderTexture Renderer.ts:182
renderTexture: PIXI.RenderTextureSystem

RenderTexture system instance

scissor Renderer.ts:152
scissor: PIXI.ScissorSystem

Scissor system instance

shader Renderer.ts:122
shader: PIXI.ShaderSystem

Shader system instance

state Renderer.ts:116
state: PIXI.StateSystem

State system instance

stencil Renderer.ts:158
stencil: PIXI.StencilSystem

Stencil system instance

texture Renderer.ts:128
texture: PIXI.TextureSystem

Texture system instance

textureGC Renderer.ts:170
textureGC: PIXI.TextureGCSystem

Texture garbage collector system instance

Public Methods

registerPlugin Renderer.ts:625
static registerPlugin(pluginName: string, ctor: IRendererPluginConstructor) → {void}
Deprecated: since 6.5.0

Use the PIXI.extensions.add API to register plugins.

Name Type Description
pluginName string

The name of the plugin.

ctor IRendererPluginConstructor

The constructor function or class for the plugin.

Type Description
addSystem Renderer.ts:372
addSystem(ClassRef: ISystemConstructor, name: string) → {this}

Add a new system to the renderer.

Name Type Description
ClassRef ISystemConstructor

Class reference

name string

Property name for system, if not specified will use a static name property on the class itself. This name will be assigned as s property on the Renderer so make sure it doesn't collide with properties on Renderer.

Type Description

Return instance of renderer

clear Renderer.ts:567
clear() → {void}

Clear the frame buffer.

Type Description
destroy Renderer.ts:574
destroy(removeView: boolean) → {void}

Removes everything from the renderer (event listeners, spritebatch, etc...)

Name Type Attributes Default Description
removeView boolean



Removes the Canvas element from the DOM. See: https://github.com/pixijs/pixi.js/issues/2233

Type Description
render Renderer.ts:416
render(displayObject: PIXI.IRenderableObject, options: object) → {void}

Renders the object to its WebGL view.

Name Type Attributes Default Description
displayObject PIXI.IRenderableObject

The object to be rendered.

options object


Object to use for render options.

options.renderTexture PIXI.RenderTexture


The render texture to render to.

options.clear boolean



Should the canvas be cleared before the new render.

options.transform PIXI.Matrix


A transform to apply to the render texture before rendering.

options.skipUpdateTransform boolean



Should we skip the update transform pass?

Type Description
render Renderer.ts:427
render(displayObject: PIXI.IRenderableObject, renderTexture: PIXI.RenderTexture, clear: boolean, transform: PIXI.Matrix, skipUpdateTransform: boolean) → {void}
Deprecated: Since 6.0.0

Please use the option render arguments instead.

Name Type Attributes Description
displayObject PIXI.IRenderableObject
renderTexture PIXI.RenderTexture


clear boolean


transform PIXI.Matrix


skipUpdateTransform boolean


Type Description
reset Renderer.ts:556
reset() → {this}

Resets the WebGL state so you can render things however you fancy!

Type Description

Returns itself.

resize Renderer.ts:544
resize(desiredScreenWidth: number, desiredScreenHeight: number) → {void}

Resizes the WebGL view to the specified width and height.

Name Type Description
desiredScreenWidth number

The desired width of the screen.

desiredScreenHeight number

The desired height of the screen.

Type Description


context Renderer.ts:407

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender Renderer.ts:397

Fired after rendering finishes.

prerender Renderer.ts:402

Fired before rendering starts.

resize AbstractRenderer.ts:286

Fired after view has been resized.

Name Type Description
screenWidth number

The new width of the screen.

screenHeight number

The new height of the screen.

Powered by webdoc!