PixiJS

Class: CanvasRenderer

PIXI.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) overrides

CanvasRenderer.ts:77
Name Type Attributes Default Description
options object <optional>

The optional renderer parameters
options.width number <optional>
 800

the width of the screen
options.height number <optional>
 600

the height of the screen
options.view HTMLCanvasElement <optional>

the canvas to use as a view, optional
options.useContextAlpha boolean <optional>
 true

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 <optional>
 false

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

sets antialias
options.resolution number <optional>
 1

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.
options.preserveDrawingBuffer boolean <optional>
 false

enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context.
options.clearBeforeRender boolean <optional>
 true

This sets if the renderer will clear the canvas or not before the new render pass.
options.backgroundColor number <optional>
 0x000000

The background color of the rendered area (shown if not transparent).
options.backgroundAlpha number <optional>
 1

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

Extends

Members

blendModes object<number, string>

Tracks the blend modes useful for this renderer.

context CanvasRenderingContext2D

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

maskManager PIXI.CanvasMaskManager

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

refresh boolean

Boolean flag controlling canvas refresh.

rootContext CanvasRenderingContext2D

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

smoothProperty string

The canvas property used to set the canvas smoothing property.

plugins object readonly overrides

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.

Properties:
Name Type Description
accessibility PIXI.AccessibilityManager

Support tabbing interactive elements.
extract PIXI.CanvasExtract

Extract image data from renderer.
interaction PIXI.InteractionManager

Handles mouse, touch and pointer events.
prepare PIXI.CanvasPrepare

Pre-render display objects.

Methods

PIXI.CanvasRenderer.registerPlugin (pluginName, ctor) void static

CanvasRenderer.ts:521

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.

clear (clearColor, alpha) void

CanvasRenderer.ts:409

Clear the canvas of renderer.

Name Type Attributes Description
clearColor string <optional>

Clear the canvas with this color, except the canvas is transparent.
alpha number <optional>

Alpha to apply to the background fill color.

destroy (removeView) void overrides

CanvasRenderer.ts:459

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

Name Type Attributes Default Description
removeView boolean <optional>
 false

Removes the Canvas element from the DOM.

invalidateBlendMode () void

CanvasRenderer.ts:499

Checks if blend mode has changed.

render (displayObject, options) void

CanvasRenderer.ts:197

Renders the object to its WebGL view.

Name Type Attributes Default Description
displayObject PIXI.DisplayObject

The object to be rendered.
options object <optional>

Object to use for render options.
options.renderTexture PIXI.RenderTexture <optional>

The render texture to render to.
options.clear boolean <optional>
 true

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

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

Should we skip the update transform pass?

render (displayObject, renderTexture, clear, transform, skipUpdateTransform) void Deprecated`` : Since 6.0.0

CanvasRenderer.ts:209

Please use the option render arguments instead.

Name Type Attributes Description
displayObject PIXI.DisplayObject
renderTexture PIXI.RenderTexture | PIXI.BaseRenderTexture <optional>
clear boolean <optional>
transform PIXI.Matrix <optional>
skipUpdateTransform boolean <optional>

resize (screenWidth, screenHeight) void overrides

CanvasRenderer.ts:479

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, readyForOuterBlend) void

CanvasRenderer.ts:430

Sets the blend mode of the renderer.

Name Type Attributes Default Description
blendMode number

See PIXI.BLEND_MODES for valid values.
readyForOuterBlend boolean <optional>
 false

Some blendModes are dangerous, they affect outer space of sprite. Pass true only if you are ready to use them.

setContextTransform (transform, roundPixels, localResolution) void

CanvasRenderer.ts:362

sets matrix of context called only from render() methods takes care about resolution

Name Type Attributes Description
transform PIXI.Matrix

world matrix of current element
roundPixels boolean <optional>

whether to round (tx,ty) coords
localResolution number <optional>

If specified, used instead of renderer.resolution for local scaling

Events

postrender

CanvasRenderer.ts:182

Fired after rendering finishes.

prerender

CanvasRenderer.ts:188

Fired before rendering starts.

Inherited Properties

From class PIXI.AbstractRenderer

autoDensity boolean inherited

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

backgroundAlpha number inherited

The background color alpha. Setting this to 0 will make the canvas transparent.

backgroundColor number inherited

The background color to fill if not transparent

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.

height number readonly inherited

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

Default Value:
  • 600

options Object readonly inherited

The supplied constructor options.

preserveDrawingBuffer boolean inherited

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

resolution number inherited

The resolution / device pixel ratio of the renderer.

Default Value:
  • 1

screen PIXI.Rectangle inherited

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

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

type number inherited

The type of the renderer.

Default Value:
  • PIXI.RENDERER_TYPE.UNKNOWN
See:

useContextAlpha boolean inherited

Pass-thru setting for the the canvas' context alpha property. This is typically not something you need to fiddle with. If you want transparency, use backgroundAlpha.

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

_backgroundColor number protected inherited

The background color as a number.

_backgroundColorRgba Array<number> protected inherited

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

_backgroundColorString string protected inherited

The background color as a string.

_lastObjectRendered PIXI.DisplayObject protected inherited

The last root object that the renderer tried to render.

Inherited Methods

From class PIXI.AbstractRenderer

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

AbstractRenderer.ts:301

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 Attributes Description
displayObject PIXI.IRenderableObject

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

The scale mode of the texture.
resolution number <optional>

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) void protected inherited

AbstractRenderer.ts:232

Initialize the plugins.

Name Type Description
staticMap object

The dictionary of statically saved plugins.