LogoPixi’VN
pixi-jsClasses

Class: CanvasRenderer<T>

Defined in: node_modules/pixi.js/lib/rendering/renderers/canvas/CanvasRenderer.d.ts:39

The Canvas PixiJS Renderer. This renderer allows you to use the HTML Canvas 2D context.

Standard

Extends

Type Parameters

T

T extends ICanvas = HTMLCanvasElement

Implements

Constructors

Constructor

> new CanvasRenderer<T>(): CanvasRenderer<T>

Defined in: node_modules/pixi.js/lib/rendering/renderers/canvas/CanvasRenderer.d.ts:47

Returns

CanvasRenderer<T>

Inherited from

AbstractRenderer.constructor

Other

_initOptions

> protected _initOptions: CanvasOptions

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:208

Inherited from

AbstractRenderer._initOptions


_roundPixels

> _roundPixels: 0 | 1

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:197

Internal

Inherited from

WebGLRenderer._roundPixels


accessibility

> accessibility: AccessibilitySystem

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilityMixins.d.ts:14

Implementation of

CanvasSystems.accessibility

Inherited from

CanvasSystems.accessibility


background

> background: BackgroundSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:205

The background system manages the background color and alpha of the main view.

Implementation of

CanvasSystems.background

Inherited from

WebGLRenderer.background


canvasContext

> canvasContext: CanvasContextSystem

Implementation of

CanvasSystems.canvasContext

Inherited from

CanvasSystems.canvasContext


canvasText

> canvasText: AbstractTextSystem

Defined in: node_modules/pixi.js/lib/scene/text/TextMixins.d.ts:7

Implementation of

CanvasSystems.canvasText

Inherited from

CanvasSystems.canvasText


config

> protected config: RendererConfig

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:209

Inherited from

WebGLRenderer.config


events

> events: EventSystem

Defined in: node_modules/pixi.js/lib/events/EventsMixins.d.ts:78

Implementation of

CanvasSystems.events

Inherited from

CanvasSystems.events


extract

> extract: ExtractSystem

Implementation of

CanvasSystems.extract

Inherited from

CanvasSystems.extract


filter

> filter: FilterSystem

Defined in: node_modules/pixi.js/lib/filters/FilterMixins.d.ts:7

Implementation of

CanvasSystems.filter

Inherited from

CanvasSystems.filter


gc

> gc: GCSystem

Implementation of

CanvasSystems.gc

Inherited from

CanvasSystems.gc


globalUniforms

> globalUniforms: GlobalUniformSystem

Implementation of

CanvasSystems.globalUniforms

Inherited from

CanvasSystems.globalUniforms


graphicsContext

> graphicsContext: CanvasGraphicsContextSystem

Defined in: node_modules/pixi.js/lib/scene/graphics/GraphicsMixins.d.ts:15

Implementation of

CanvasSystems.graphicsContext

Inherited from

CanvasSystems.graphicsContext


hello

> hello: HelloSystem

Implementation of

CanvasSystems.hello

Inherited from

CanvasSystems.hello


htmlText

> htmlText: HTMLTextSystem

Defined in: node_modules/pixi.js/lib/scene/text-html/TextHTMLMixins.d.ts:7

Implementation of

CanvasSystems.htmlText

Inherited from

CanvasSystems.htmlText


initHook

> initHook: RendererInitHook

Implementation of

CanvasSystems.initHook

Inherited from

CanvasSystems.initHook


limits

> limits: CanvasLimitsSystem

Implementation of

CanvasSystems.limits

Inherited from

CanvasSystems.limits


name

> readonly name: string

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:191

The name of the renderer.

Inherited from

WebGLRenderer.name


renderableGC

> renderableGC: RenderableGCSystem

Implementation of

CanvasSystems.renderableGC

Inherited from

CanvasSystems.renderableGC


renderGroup

> renderGroup: RenderGroupSystem

Implementation of

CanvasSystems.renderGroup

Inherited from

CanvasSystems.renderGroup


renderPipes

> readonly renderPipes: CanvasPipes

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:201

Internal

Inherited from

AbstractRenderer.renderPipes


renderTarget

> renderTarget: CanvasRenderTargetSystem

Implementation of

CanvasSystems.renderTarget

Inherited from

CanvasSystems.renderTarget


runners

> readonly runners: Runners

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:199

Internal

Inherited from

WebGLRenderer.runners


scheduler

> scheduler: SchedulerSystem

Implementation of

CanvasSystems.scheduler

Inherited from

CanvasSystems.scheduler


texture

> texture: CanvasTextureSystem

Implementation of

CanvasSystems.texture

Inherited from

CanvasSystems.texture


textureGC

> textureGC: TextureGCSystem

Implementation of

CanvasSystems.textureGC

Inherited from

CanvasSystems.textureGC


textureGenerator

> textureGenerator: GenerateTextureSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:207

System that manages the generation of textures from the renderer

Implementation of

CanvasSystems.textureGenerator

Inherited from

WebGLRenderer.textureGenerator


tick

> tick: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:193

The current tick of the renderer.

Inherited from

WebGLRenderer.tick


type

> readonly type: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:189

Internal

Inherited from

AbstractRenderer.type


uid

> readonly uid: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:195

Internal

Inherited from

WebGLRenderer.uid


view

> view: ViewSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:203

The view system manages the main canvas that is attached to the DOM

Implementation of

CanvasSystems.view

Inherited from

AbstractRenderer.view


defaultOptions

> static defaultOptions: object

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:153

The default options for the renderer.

failIfMajorPerformanceCaveat

> failIfMajorPerformanceCaveat: boolean

Should the failIfMajorPerformanceCaveat flag be enabled as a context option used in the isWebGLSupported function. If set to true, a WebGL renderer can fail to be created if the browser thinks there could be performance issues when using WebGL.

In PixiJS v6 this has changed from true to false by default, to allow WebGL to work in as many scenarios as possible. However, some users may have a poor experience, for example, if a user has a gpu or driver version blacklisted by the browser.

If your application requires high performance rendering, you may wish to set this to false. We recommend one of two options if you decide to set this flag to false:

1: Use the Canvas renderer as a fallback in case high performance WebGL is not supported.

2: Call isWebGLSupported (which if found in the utils package) in your code before attempting to create a PixiJS renderer, and show an error message to the user if the function returns false, explaining that their device & browser combination does not support high performance WebGL. This is a much better strategy than trying to create a PixiJS renderer and finding it then fails.

Default
false

resolution

> resolution: number

Default resolution / device pixel ratio of the renderer.

Default
1

roundPixels

> roundPixels: boolean

Should round pixels be forced when rendering?

Default
false

Inherited from

AbstractRenderer.defaultOptions


prefixed

> static prefixed: string | boolean

Defined in: node_modules/eventemitter3/index.d.ts:9

Inherited from

AbstractRenderer.prefixed


canvas

Get Signature

> get canvas(): CANVAS

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:269

The canvas element that everything is drawn to.

Returns

CANVAS

Inherited from

AbstractRenderer.canvas


height

Get Signature

> get height(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:264

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

Default
600
Returns

number

Inherited from

AbstractRenderer.height


lastObjectRendered

Get Signature

> get lastObjectRendered(): Container

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:274

the last object rendered by the renderer. Useful for other plugins like interaction managers

Returns

Container

Inherited from

AbstractRenderer.lastObjectRendered


renderingToScreen

Get Signature

> get renderingToScreen(): boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:280

Flag if we are rendering to the screen vs renderTexture

Default
true
Returns

boolean

Inherited from

AbstractRenderer.renderingToScreen


resolution

Get Signature

> get resolution(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:251

The resolution / device pixel ratio of the renderer.

Returns

number

Set Signature

> set resolution(value): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:252

Parameters
value

number

Returns

void

Inherited from

AbstractRenderer.resolution


roundPixels

Get Signature

> get roundPixels(): boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:315

Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.

Returns

boolean

Inherited from

AbstractRenderer.roundPixels


screen

Get Signature

> get screen(): Rectangle

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:286

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

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

Returns

Rectangle

Inherited from

AbstractRenderer.screen


width

Get Signature

> get width(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:259

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

Default
800
Returns

number

Inherited from

AbstractRenderer.width


addListener()

> addListener<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:45

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

AbstractRenderer.addListener


clear()

> clear(options?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:249

Clears the render target.

Parameters

options?

ClearOptions

The options to use when clearing the render target.

Returns

void

Advanced

Inherited from

AbstractRenderer.clear


destroy()

> destroy(options?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:304

Parameters

options?

RendererDestroyOptions

Returns

void

Inherited from

AbstractRenderer.destroy


emit()

> emit<T>(event, ...args): boolean

Defined in: node_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

args

...ArgumentMap<{ resize: [number, number, number]; }>[Extract<T, "resize">]

Returns

boolean

Inherited from

AbstractRenderer.emit


eventNames()

> eventNames(): "resize"[]

Defined in: node_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered listeners.

Returns

"resize"[]

Inherited from

AbstractRenderer.eventNames


generateTexture()

> generateTexture(options): Texture

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:310

Generate a texture from a container.

Parameters

options

Container<ContainerChild> | GenerateTextureOptions

options or container target to use when generating the texture

Returns

Texture

a texture

Inherited from

AbstractRenderer.generateTexture


init()

> init(options?): Promise<void>

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:222

Initialize the renderer.

Parameters

options?

Partial<CanvasOptions>

The options to use to create the renderer.

Returns

Promise<void>

Inherited from

AbstractRenderer.init


listenerCount()

> listenerCount(event): number

Defined in: node_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

Parameters

event

"resize"

Returns

number

Inherited from

AbstractRenderer.listenerCount


listeners()

> listeners<T>(event): (...args) => void[]

Defined in: node_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

Returns

(...args) => void[]

Inherited from

AbstractRenderer.listeners


off()

> off<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:69

Type Parameters

T

T extends "resize"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

AbstractRenderer.off


on()

> on<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

AbstractRenderer.on


once()

> once<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

AbstractRenderer.once


removeAllListeners()

> removeAllListeners(event?): this

Defined in: node_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

Parameters

event?

"resize"

Returns

this

Inherited from

AbstractRenderer.removeAllListeners


removeListener()

> removeListener<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

AbstractRenderer.removeListener


render()

Call Signature

> render(options): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:229

Renders the object to its view.

Parameters
options

Container<ContainerChild> | RenderOptions

The options to render with.

Container<ContainerChild>


RenderOptions

Returns

void

Inherited from

AbstractRenderer.render

Call Signature

> render(container, options): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:231

Parameters
container

Container

options
renderTexture

any

Returns

void

Deprecated

since 8.0.0

Inherited from

AbstractRenderer.render


resetState()

> resetState(): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:345

Resets the rendering state of the renderer. This is useful when you want to use the WebGL context directly and need to ensure PixiJS's internal state stays synchronized. When modifying the WebGL context state externally, calling this method before the next Pixi render will reset all internal caches and ensure it executes correctly.

This is particularly useful when combining PixiJS with other rendering engines like Three.js:

// Reset Three.js state
threeRenderer.resetState();

// Render a Three.js scene
threeRenderer.render(threeScene, threeCamera);

// Reset PixiJS state since Three.js modified the WebGL context
pixiRenderer.resetState();

// Now render Pixi content
pixiRenderer.render(pixiScene);

Returns

void

Advanced

Inherited from

AbstractRenderer.resetState


resize()

> resize(desiredScreenWidth, desiredScreenHeight, resolution?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:240

Resizes the WebGL view to the specified width and height.

Parameters

desiredScreenWidth

number

The desired width of the screen.

desiredScreenHeight

number

The desired height of the screen.

resolution?

number

The resolution / device pixel ratio of the renderer.

Returns

void

Inherited from

AbstractRenderer.resize

rendering

prepare

> prepare: PrepareBase

Defined in: node_modules/pixi.js/lib/prepare/PrepareMixins.d.ts:13

The prepare mixin provides methods to prepare display objects for rendering. It is used to ensure that textures and other resources are ready before rendering.

Advanced

Implementation of

CanvasSystems.prepare

Inherited from

CanvasSystems.prepare