PIXI.CanvasRenderer

class CanvasRenderer extends PIXI.AbstractRenderer

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!

Constructor

new PIXI.CanvasRenderer(options: IRendererOptions) → {}

Parameters:
Name	Type	Attributes	Default	Description
options	IRendererOptions	<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>	PIXI.settings.RESOLUTION	The resolution / device pixel ratio of the renderer.
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).

Summary

Properties from CanvasRenderer

string[]	blendModes Tracks the blend modes useful for this renderer.
CrossPlatformCanvasRenderingContext2D	context The currently active canvas 2d context (could change with renderTextures)
PIXI.CanvasMaskManager	maskManager
boolean	refresh = true Boolean flag controlling canvas refresh.
CrossPlatformCanvasRenderingContext2D	rootContext The root canvas 2d context that everything is drawn with.
SmoothingEnabledProperties	smoothProperty = "imageSmoothingEnabled" The canvas property used to set the canvas smoothing property.
object	plugins

Methods from CanvasRenderer

void	static registerPlugin(pluginName: string, ctor: ICanvasRendererPluginConstructor)
this	addSystem() Adds a new system to the renderer. It does nothing in the CanvasRenderer.
void	clear(clearColor: string, alpha: number)
void	destroy(removeView: boolean)
void	invalidateBlendMode() Checks if blend mode has changed.
void	render(displayObject: PIXI.DisplayObject, options: IRendererRenderOptions)
void	render(displayObject: PIXI.DisplayObject, renderTexture: PIXI.RenderTexture \| PIXI.BaseRenderTexture, clear: boolean, transform: PIXI.Matrix, skipUpdateTransform: boolean)
void	resize(desiredScreenWidth: number, desiredScreenHeight: number)
void	setBlendMode(blendMode: number, readyForOuterBlend: boolean)
void	setContextTransform(transform: PIXI.Matrix, roundPixels: boolean, localResolution: number)

Events from CanvasRenderer

postrender

prerender

Properties inherited from AbstractRenderer

boolean	autoDensity = --
number	backgroundAlpha
number	backgroundColor
boolean	clearBeforeRender
number	height = 600
object	options
boolean	preserveDrawingBuffer
number	resolution = PIXI.settings.RESOLUTION
PIXI.Rectangle	screen Measurements of the screen. (0, 0, screenWidth, screenHeight).
number	type = PIXI.RENDERER_TYPE.UNKNOWN
boolean	useContextAlpha
HTMLCanvasElement	view
number	width = 800
number	protected _backgroundColor = 0
Array<number>	protected _backgroundColorRgba
string	protected _backgroundColorString = "#000000"
PIXI.DisplayObject	protected _lastObjectRendered = undefined

Methods inherited from AbstractRenderer

PIXI.RenderTexture

generateTexture(displayObject: PIXI.IRenderableObject, options: object)

PIXI.RenderTexture

generateTexture(displayObject: PIXI.IRenderableObject, scaleMode: PIXI.SCALE_MODES, resolution: number, region: PIXI.Rectangle)

void

protected initPlugins(staticMap: object)

Public Properties

blendModes CanvasRenderer.ts:92

blendModes: string[]

Tracks the blend modes useful for this renderer.

context CanvasRenderer.ts:81

context: CrossPlatformCanvasRenderingContext2D

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

maskManager CanvasRenderer.ts:85

maskManager: PIXI.CanvasMaskManager

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

refresh CanvasRenderer.ts:83

refresh: boolean = true

Boolean flag controlling canvas refresh.

rootContext CanvasRenderer.ts:79

rootContext: CrossPlatformCanvasRenderingContext2D

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

smoothProperty CanvasRenderer.ts:90

smoothProperty: SmoothingEnabledProperties = "imageSmoothingEnabled"

The canvas property used to set the canvas smoothing property.

plugins CanvasRenderer.ts:468

plugins: object

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.

Public Methods

registerPlugin CanvasRenderer.ts:480

static registerPlugin(pluginName: string, ctor: ICanvasRendererPluginConstructor) → {void}

Deprecated: since 6.5.0

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

Parameters:
Name	Type	Description
pluginName	string	The name of the plugin.
ctor	ICanvasRendererPluginConstructor	The constructor function or class for the plugin.

Returns:
Type	Description
void

addSystem CanvasRenderer.ts:161

addSystem() → {this}

Adds a new system to the renderer. It does nothing in the CanvasRenderer.

Returns:
Type	Description
this

clear CanvasRenderer.ts:375

clear(clearColor: string, alpha: number) → {void}

Clear the canvas of renderer.

Parameters:
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.

Returns:
Type	Description
void

destroy CanvasRenderer.ts:423

destroy(removeView: boolean) → {void}

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

Parameters:
Name	Type	Attributes	Default	Description
removeView	boolean	<optional>	false	Removes the Canvas element from the DOM.

Returns:
Type	Description
void

invalidateBlendMode CanvasRenderer.ts:460

invalidateBlendMode() → {void}

Checks if blend mode has changed.

Returns:
Type	Description
void

render CanvasRenderer.ts:167

render(displayObject: PIXI.DisplayObject, options: IRendererRenderOptions) → {void}

Renders the object to its WebGL view.

Parameters:
Name	Type	Attributes	Default	Description
displayObject	PIXI.DisplayObject			The object to be rendered.
options	IRendererRenderOptions	<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?

Returns:
Type	Description
void

render CanvasRenderer.ts:178

render(displayObject: PIXI.DisplayObject, renderTexture: PIXI.RenderTexture | PIXI.BaseRenderTexture, clear: boolean, transform: PIXI.Matrix, skipUpdateTransform: boolean) → {void}

Deprecated: Since 6.0.0

Please use the option render arguments instead.

Parameters:
Name	Type	Attributes	Description
displayObject	PIXI.DisplayObject		The object to be rendered.
renderTexture	PIXI.RenderTexture \| PIXI.BaseRenderTexture	<optional>	The render texture to render to.
clear	boolean	<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	<optional>	Should we skip the update transform pass?

Returns:
Type	Description
void

resize CanvasRenderer.ts:442

resize(desiredScreenWidth: number, desiredScreenHeight: number) → {void}

Resizes the canvas view to the specified width and height.

Parameters:
Name	Type	Description
desiredScreenWidth	number	the desired width of the screen
desiredScreenHeight	number	the desired height of the screen

Returns:
Type	Description
void

setBlendMode CanvasRenderer.ts:395

setBlendMode(blendMode: number, readyForOuterBlend: boolean) → {void}

Sets the blend mode of the renderer.

Parameters:
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.

Returns:
Type	Description
void

setContextTransform CanvasRenderer.ts:328

setContextTransform(transform: PIXI.Matrix, roundPixels: boolean, localResolution: number) → {void}

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

Parameters:
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

Returns:
Type	Description
void

Events

postrender CanvasRenderer.ts:70

Fired after rendering finishes.

prerender CanvasRenderer.ts:74

Fired before rendering starts.