PixiJS

Class: Renderer

PIXI.Renderer

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!

new PIXI.Renderer (options)

Renderer.js:35
Name Type Description
options object optional

The optional renderer parameters.

Name Type Default Description
width number 800 optional

The width of the screen.
height number 600 optional

The height of the screen.
view HTMLCanvasElement optional

The canvas to use as a view, optional.
transparent boolean false optional

If the render view is transparent.
autoDensity boolean false optional

Resizes renderer view in CSS pixels to allow for resolutions other than 1.
antialias boolean false optional

Sets antialias. If not available natively then FXAA antialiasing is used.
resolution number 1 optional

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.
clearBeforeRender boolean true optional

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.
preserveDrawingBuffer boolean false optional

Enables drawing buffer preservation, enable this if you need to call toDataUrl on the WebGL context.
backgroundColor number 0x000000 optional

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

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

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

Extends

Members

_backgroundColor number protected inherited

The background color as a number.

_backgroundColorRgba Array.<number> protected inherited

The background color as an [R, G, B] array.

_backgroundColorString string protected inherited

The background color as a string.

_lastObjectRendered PIXI.DisplayObject protected inherited overrides

The last root object that the renderer tried to render.

autoDensity boolean inherited

Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.

autoResize boolean Deprecated : since 5.0.0 inherited

See:

backgroundColor number inherited

The background color to fill if not transparent

batch PIXI.systems.BatchSystem readonly

Batch system instance

clearBeforeRender boolean inherited

This sets if the CanvasRenderer will clear the canvas or not before the new render pass. If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect to clear the canvas every frame. Disable this by setting this to false. For example, if your game has a canvas filling background image you often don't need this set.

context PIXI.systems.ContextSystem readonly

Context system instance

extract PIXI.Extract

Collection of methods for extracting data (image, pixels, etc.) from a display object or render texture

See:

filter PIXI.systems.FilterSystem readonly

Filter system instance

framebuffer PIXI.systems.FramebufferSystem readonly

Framebuffer system instance

geometry PIXI.systems.GeometrySystem readonly

Geometry system instance

gl WebGLRenderingContext readonly

WebGL context, set by the contextSystem (this.context)

globalUniforms PIXI.UniformGroup

Global uniforms

height number readonly inherited

Same as view.height, actual number of pixels in the canvas by vertical.

Default Value:
  • 600

mask PIXI.systems.MaskSystem readonly

Mask system instance

options Object readonly inherited

The supplied constructor options.

plugins object readonly inherited

Collection of plugins.

preserveDrawingBuffer boolean inherited

The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.

projection PIXI.systems.ProjectionSystem readonly

Projection system instance

renderingToScreen boolean readonly

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

renderTexture PIXI.systems.RenderTextureSystem readonly

RenderTexture system instance

resolution number inherited

The resolution / device pixel ratio of the renderer.

Default Value:
  • 1

scissor PIXI.systems.ScissorSystem readonly

Scissor system instance

screen PIXI.Rectangle inherited

Measurements of the screen. (0, 0, screenWidth, screenHeight).

Its safe to use as filterArea or hitArea for the whole stage.

shader PIXI.systems.ShaderSystem readonly

Shader system instance

state PIXI.systems.StateSystem readonly

State system instance

stencil PIXI.systems.StencilSystem readonly

Stencil system instance

texture PIXI.systems.TextureSystem readonly

Texture system instance

textureGC PIXI.systems.TextureGCSystem readonly

Texture garbage collector system instance

textureManager PIXI.systems.TextureSystem Deprecated : since 5.0.0

See:

transparent boolean inherited

Whether the render view is transparent.

type number inherited

The type of the renderer.

Default Value:
  • PIXI.RENDERER_TYPE.UNKNOWN
See:

view HTMLCanvasElement inherited

The canvas element that everything is drawn to.

width number readonly inherited

Same as view.width, actual number of pixels in the canvas by horizontal.

Default Value:
  • 800

Methods

PIXI.Renderer.registerPlugin (pluginName, ctor) static

Renderer.js:377

Adds a plugin to the renderer.

Name Type Description
pluginName string

The name of the plugin.
ctor function

The constructor function or class for the plugin.

addSystem (ClassRef, name)PIXI.Renderer

Renderer.js:252

Add a new system to the renderer.

Name Type Description
ClassRef function

Class reference
name string optional

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.
Returns:
Type Description
PIXI.Renderer Return instance of renderer

clear ()

Renderer.js:350

Clear the frame buffer

destroy (removeView) overrides

Renderer.js:360

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

Name Type Default Description
removeView boolean false optional

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

generateTexture (displayObject, scaleMode, resolution, region)PIXI.RenderTexture inherited

AbstractRenderer.js:217

Useful function that returns a texture of the display object that can then be used to create sprites This can be quite useful if your displayObject is complicated and needs to be reused multiple times.

Name Type Description
displayObject PIXI.DisplayObject

The displayObject the object will be generated from.
scaleMode PIXI.SCALE_MODES

The scale mode of the texture.
resolution number

The resolution / device pixel ratio of the texture being generated.
region PIXI.Rectangle optional

The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.
Returns:
Type Description
PIXI.RenderTexture A texture of the graphics object.

initPlugins (staticMap) protected inherited

AbstractRenderer.js:156

Initialize the plugins.

Name Type Description
staticMap object

The dictionary of statically saved plugins.

render (displayObject, renderTexture, clear, transform, skipUpdateTransform)

Renderer.js:291

Renders the object to its WebGL view

Name Type Default Description
displayObject PIXI.DisplayObject

The object to be rendered.
renderTexture PIXI.RenderTexture optional

The render texture to render to.
clear boolean true optional

Should the canvas be cleared before the new render.
transform PIXI.Matrix optional

A transform to apply to the render texture before rendering.
skipUpdateTransform boolean false optional

Should we skip the update transform pass?

reset ()PIXI.Renderer

Renderer.js:343

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

Returns:
Type Description
PIXI.Renderer Returns itself.

resize (screenWidth, screenHeight) overrides

Renderer.js:334

Resizes the WebGL view to the specified width and height.

Name Type Description
screenWidth number

The new width of the screen.
screenHeight number

The new height of the screen.

Events

context

Renderer.js:274

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

Renderer.js:264

Fired after rendering finishes.

prerender

Renderer.js:269

Fired before rendering starts.

resize

AbstractRenderer.js:197

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.