Class: CanvasRenderer


The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support WebGL. Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)

new PIXI.CanvasRenderer (options)

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, default false

autoResize boolean false optional

If the render view is automatically resized, default false

antialias boolean false optional

sets antialias (only applicable in chrome at the moment)

resolution number 1 optional

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.

preserveDrawingBuffer boolean false optional

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

clearBeforeRender boolean true optional

This sets if the renderer will clear the canvas or not before the new render pass.

backgroundColor number 0x000000 optional

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

roundPixels boolean false optional

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.



autoResize boolean inherited

Whether css dimensions of canvas view should be resized to screen dimensions automatically

backgroundColor number inherited

The background color to fill if not transparent

blendModes object.<string, mixed> inherited

Tracks the blend modes useful for this renderer.

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 CanvasRenderingContext2D

The currently active canvas 2d context (could change with renderTextures)

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


height number readonly inherited

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

Default Value:
  • 600

Instance of a CanvasMaskManager, handles masking when using the canvas renderer.

options Object readonly inherited

The supplied constructor options.

plugins object readonly

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.accessibility.AccessibilityManager

Support tabbing interactive elements.

extract PIXI.extract.CanvasExtract

Extract image data from renderer.

interaction PIXI.interaction.InteractionManager

Handles mouse, touch and pointer events.

prepare PIXI.prepare.CanvasPrepare

Pre-render display objects.

preserveDrawingBuffer boolean inherited

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

refresh boolean

Boolean flag controlling canvas refresh.

resolution number inherited overrides

The resolution / device pixel ratio of the renderer

Default Value:
  • 1

rootContext CanvasRenderingContext2D

The root canvas 2d context that everything is drawn with.

roundPixels boolean inherited

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. Handy for crisp pixel art and speed on legacy devices.

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

Its safe to use as filterArea or hitArea for whole stage

smoothProperty string

The canvas property used to set the canvas smoothing property.

transparent boolean inherited

Whether the render view is transparent

type number inherited

The type of the renderer.

Default Value:

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


clear (clearColor)

Clear the canvas of renderer.

Name Type Description
clearColor string optional

Clear the canvas with this color, except the canvas is transparent.

destroy (removeView) overrides

Removes everything from the renderer and optionally removes the Canvas DOM element.

Name Type Default Description
removeView boolean false optional

Removes the Canvas element from the DOM.

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

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 number

Should be one of the scaleMode consts

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.

Type Description
PIXI.Texture a texture of the graphics object

invalidateBlendMode ()

Checks if blend mode has changed.

registerPlugin (pluginName, ctor)

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.

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

Renders the object to this canvas view

Name Type Default Description
displayObject PIXI.DisplayObject

The object to be rendered

renderTexture PIXI.RenderTexture optional

A render texture to be rendered to. If unset, it will render to the root context.

clear boolean false optional

Whether to clear the canvas before drawing

transform PIXI.Transform optional

A transformation to be applied

skipUpdateTransform boolean false optional

Whether to skip the update transform

resize (screenWidth, screenHeight) overrides

Resizes the canvas 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

setBlendMode (blendMode)

Sets the blend mode of the renderer.

Name Type Description
blendMode number

See PIXI.BLEND_MODES for valid values.


Fired after rendering finishes.

Fired before rendering starts.