Filter

Hide inherited members:

show private members:

Phaser . Renderer . Canvas . CanvasRenderer

The Canvas Renderer is responsible for managing 2D canvas rendering contexts, including the one used by the Games canvas. It tracks the internal state of a given context and can renderer textured Game Objects to it, taking into account alpha, blending, and scaling.

Constructor:

new CanvasRenderer(game)

Parameters:

name	type	description
game	Phaser.Game	The Phaser Game instance that owns this renderer.

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 19)

Extends

Phaser.Events.EventEmitter

Members

<private> _tempMatrix1: Phaser.GameObjects.Components.TransformMatrix

Description:

A temporary Transform Matrix, re-used internally during batching.

Type:

Phaser.GameObjects.Components.TransformMatrix

Since: 3.11.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 179)

<private> _tempMatrix2: Phaser.GameObjects.Components.TransformMatrix

Description:

A temporary Transform Matrix, re-used internally during batching.

Type:

Phaser.GameObjects.Components.TransformMatrix

Since: 3.11.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 189)

<private> _tempMatrix3: Phaser.GameObjects.Components.TransformMatrix

Description:

A temporary Transform Matrix, re-used internally during batching.

Type:

Phaser.GameObjects.Components.TransformMatrix

Since: 3.11.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 199)

antialias: boolean

Description:

Should the Canvas use Image Smoothing or not when drawing Sprites?

Type:

boolean

Since: 3.20.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 139)

blendModes: array

Description:

The blend modes supported by the Canvas Renderer.

This object maps the Phaser.BlendModes to canvas compositing operations.

Type:

array

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 148)

config: object

Description:

The local configuration settings of the CanvasRenderer.

Type:

object

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 46)

currentContext: CanvasRenderingContext2D

Description:

The canvas context currently used by the CanvasRenderer for all rendering operations.

Type:

CanvasRenderingContext2D

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 130)

drawCount: number

Description:

The total number of Game Objects which were rendered in a frame.

Type:

number

Default: 0

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 78)

game: Phaser.Game

Description:

The Phaser Game instance that owns this renderer.

Type:

Phaser.Game

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 60)

gameCanvas: HTMLCanvasElement

Description:

The canvas element which the Game uses.

Type:

HTMLCanvasElement

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 106)

gameContext: CanvasRenderingContext2D

Description:

The canvas context used to render all Cameras in all Scenes during the game loop.

Type:

CanvasRenderingContext2D

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 121)

height: number

Description:

The height of the canvas being rendered to.

Type:

number

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 97)

isBooted: boolean

Description:

Has this renderer fully booted yet?

Type:

boolean

Since: 3.50.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 209)

snapshotState: Phaser.Types.Renderer.Snapshot.SnapshotState

Description:

Details about the currently scheduled snapshot.

If a non-null callback is set in this object, a snapshot of the canvas will be taken after the current frame is fully rendered.

Type:

Phaser.Types.Renderer.Snapshot.SnapshotState

Since: 3.16.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 159)

type: number

Description:

A constant which allows the renderer to be easily identified as a Canvas Renderer.

Type:

number

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 69)

width: number

Description:

The width of the canvas being rendered to.

Type:

number

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 88)

Methods

addListener(event, fn, [context])

Description:

Add a listener for a given event.

Parameters:

name	type	arguments	Default	description
event	string \| symbol			The event name.
fn	function			The listener function.
context	*	<optional>	this	The context to invoke the listener with.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#addListener

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 111)

batchSprite(sprite, frame, camera, [parentTransformMatrix])

Description:

Takes a Sprite Game Object, or any object that extends it, and draws it to the current context.

Parameters:

name	type	arguments	description
sprite	Phaser.GameObjects.GameObject		The texture based Game Object to draw.
frame	Phaser.Textures.Frame		The frame to draw, doesn't have to be that owned by the Game Object.
camera	Phaser.Cameras.Scene2D.Camera		The Camera to use for the rendering transform.
parentTransformMatrix	Phaser.GameObjects.Components.TransformMatrix	<optional>	The transform matrix of the parent container, if set.

Since: 3.12.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 673)

<private> boot()

Description:

Internal boot handler.

Since: 3.50.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 232)

destroy()

Description:

Destroys all object references in the Canvas Renderer.

Overrides: Phaser.Events.EventEmitter#destroy

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 860)

emit(event, [args])

Description:

Calls each of the listeners registered for a given event.

Parameters:

name	type	arguments	description
event	string \| symbol		The event name.
args	*	<optional>	Additional arguments that will be passed to the event handler.

Returns:

Description:

true if the event had listeners, else false.

Type:

boolean

Inherited from: Phaser.Events.EventEmitter#emit

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 86)

eventNames()

Description:

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

Type:

Array.<(string
symbol)>

Inherited from: Phaser.Events.EventEmitter#eventNames

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 55)

init()

Description:

Prepares the game canvas for rendering.

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 221)

listenerCount(event)

Description:

Return the number of listeners listening to a given event.

Parameters:

name	type	description
event	string \| symbol	The event name.

Returns:

Description:

The number of listeners.

Type:

number

Inherited from: Phaser.Events.EventEmitter#listenerCount

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 75)

listeners(event)

Description:

Return the listeners registered for a given event.

Parameters:

name	type	description
event	string \| symbol	The event name.

Returns:

Description:

The registered listeners.

Type:

Array.<function()>

Inherited from: Phaser.Events.EventEmitter#listeners

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 64)

off(event, [fn], [context], [once])

Description:

Remove the listeners of a given event.

Parameters:

name	type	arguments	description
event	string \| symbol		The event name.
fn	function	<optional>	Only remove the listeners that match this function.
context	*	<optional>	Only remove the listeners that have this context.
once	boolean	<optional>	Only remove one-time listeners.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#off

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 151)

on(event, fn, [context])

Description:

Add a listener for a given event.

Parameters:

name	type	arguments	Default	description
event	string \| symbol			The event name.
fn	function			The listener function.
context	*	<optional>	this	The context to invoke the listener with.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#on

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 98)

onResize(gameSize, baseSize)

Description:

The event handler that manages the resize event dispatched by the Scale Manager.

Parameters:

name	type	description
gameSize	Phaser.Structs.Size	The default Game Size object. This is the un-modified game dimensions.
baseSize	Phaser.Structs.Size	The base Size object. The game dimensions multiplied by the resolution. The canvas width / height values match this.

Since: 3.16.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 255)

once(event, fn, [context])

Description:

Add a one-time listener for a given event.

Parameters:

name	type	arguments	Default	description
event	string \| symbol			The event name.
fn	function			The listener function.
context	*	<optional>	this	The context to invoke the listener with.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#once

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 124)

postRender()

Description:

Restores the game context's global settings and takes a snapshot if one is scheduled.

The post-render step happens after all Cameras in all Scenes have been rendered.

Fires:

Phaser.Renderer.Events.POST_RENDER

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 511)

preRender()

Description:

Called at the start of the render loop.

Fires:

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 353)

removeAllListeners([event])

Description:

Remove all listeners, or those of the specified event.

Parameters:

name	type	arguments	description
event	string \| symbol	<optional>	The event name.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#removeAllListeners

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 165)

removeListener(event, [fn], [context], [once])

Description:

Remove the listeners of a given event.

Parameters:

name	type	arguments	description
event	string \| symbol		The event name.
fn	function	<optional>	Only remove the listeners that match this function.
context	*	<optional>	Only remove the listeners that have this context.
once	boolean	<optional>	Only remove one-time listeners.

Returns:

Description:

this.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Inherited from: Phaser.Events.EventEmitter#removeListener

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 137)

render(scene, children, camera)

Description:

The core render step for a Scene Camera.

Iterates through the given array of Game Objects and renders them with the given Camera.

This is called by the CameraManager.render method. The Camera Manager instance belongs to a Scene, and is invoked by the Scene Systems.render method.

This method is not called if Camera.visible is false, or Camera.alpha is zero.

Parameters:

name	type	description
scene	Phaser.Scene	The Scene to render.
children	Array.<Phaser.GameObjects.GameObject>	An array of filtered Game Objects that can be rendered by the given Camera.
camera	Phaser.Cameras.Scene2D.Camera	The Scene Camera to render with.

Fires:

Phaser.Renderer.Events.RENDER

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 393)

resetTransform()

Description:

Resets the transformation matrix of the current context to the identity matrix, thus resetting any transformation.

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 291)

resize([width], [height])

Description:

Resize the main game canvas.

Parameters:

name	type	arguments	description
width	number	<optional>	The new width of the renderer.
height	number	<optional>	The new height of the renderer.

Fires:

Phaser.Renderer.Events.RESIZE

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 273)

setAlpha(alpha)

Description:

Sets the global alpha of the current context.

Parameters:

name	type	description
alpha	number	The new alpha to use, where 0 is fully transparent and 1 is fully opaque.

Returns:

Description:

This CanvasRenderer object.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 336)

setBlendMode(blendMode)

Description:

Sets the blend mode (compositing operation) of the current context.

Parameters:

name	type	description
blendMode	string	The new blend mode which should be used.

Returns:

Description:

This CanvasRenderer object.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 302)

setContext([ctx])

Description:

Changes the Canvas Rendering Context that all draw operations are performed against.

Parameters:

name	type	arguments	description
ctx	CanvasRenderingContext2D	<optional>	The new Canvas Rendering Context to draw everything to. Leave empty to reset to the Game Canvas.

Returns:

Description:

The Canvas Renderer instance.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.12.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 319)

shutdown()

Description:

Removes all listeners.

Inherited from: Phaser.Events.EventEmitter#shutdown

Since: 3.0.0

Source: src/events/EventEmitter.js (Line 31)

snapshot(callback, [type], [encoderOptions])

Description:

Schedules a snapshot of the entire game viewport to be taken after the current frame is rendered.

To capture a specific area see the snapshotArea method. To capture a specific pixel, see snapshotPixel.

Only one snapshot can be active per frame. If you have already called snapshotPixel, for example, then calling this method will override it.

Snapshots work by creating an Image object from the canvas data, this is a blocking process, which gets more expensive the larger the canvas size gets, so please be careful how you employ this in your game.

Parameters:

name	type	arguments	Default	description
callback	Phaser.Types.Renderer.Snapshot.SnapshotCallback			The Function to invoke after the snapshot image is created.
type	string	<optional>	'image/png'	The format of the image to create, usually `image/png` or `image/jpeg`.
encoderOptions	number	<optional>	0.92	The image quality, between 0 and 1. Used for image formats with lossy compression, such as `image/jpeg`.

Returns:

Description:

This WebGL Renderer.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.0.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 578)

snapshotArea(x, y, width, height, callback, [type], [encoderOptions])

Description:

Schedules a snapshot of the given area of the game viewport to be taken after the current frame is rendered.

To capture the whole game viewport see the snapshot method. To capture a specific pixel, see snapshotPixel.

Only one snapshot can be active per frame. If you have already called snapshotPixel, for example, then calling this method will override it.

Parameters:

name	type	arguments	Default	description
x	number			The x coordinate to grab from.
y	number			The y coordinate to grab from.
width	number			The width of the area to grab.
height	number			The height of the area to grab.
callback	Phaser.Types.Renderer.Snapshot.SnapshotCallback			The Function to invoke after the snapshot image is created.
type	string	<optional>	'image/png'	The format of the image to create, usually `image/png` or `image/jpeg`.
encoderOptions	number	<optional>	0.92	The image quality, between 0 and 1. Used for image formats with lossy compression, such as `image/jpeg`.

Returns:

Description:

This WebGL Renderer.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.16.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 603)

snapshotCanvas(canvas, callback, [getPixel], [x], [y], [width], [height], [type], [encoderOptions])

Description:

Takes a snapshot of the given area of the given canvas.

Unlike the other snapshot methods, this one is processed immediately and doesn't wait for the next render.

Parameters:

name	type	arguments	Default	description
canvas	HTMLCanvasElement			The canvas to grab from.
callback	Phaser.Types.Renderer.Snapshot.SnapshotCallback			The Function to invoke after the snapshot image is created.
getPixel	boolean	<optional>	false	Grab a single pixel as a Color object, or an area as an Image object?
x	number	<optional>	0	The x coordinate to grab from.
y	number	<optional>	0	The y coordinate to grab from.
width	number	<optional>	canvas.width	The width of the area to grab.
height	number	<optional>	canvas.height	The height of the area to grab.
type	string	<optional>	'image/png'	The format of the image to create, usually `image/png` or `image/jpeg`.
encoderOptions	number	<optional>	0.92	The image quality, between 0 and 1. Used for image formats with lossy compression, such as `image/jpeg`.

Returns:

Description:

This Canvas Renderer.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.19.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 538)

snapshotPixel(x, y, callback)

Description:

Schedules a snapshot of the given pixel from the game viewport to be taken after the current frame is rendered.

To capture the whole game viewport see the snapshot method. To capture a specific area, see snapshotArea.

Only one snapshot can be active per frame. If you have already called snapshotArea, for example, then calling this method will override it.

Unlike the other two snapshot methods, this one will return a Color object containing the color data for the requested pixel. It doesn't need to create an internal Canvas or Image object, so is a lot faster to execute, using less memory.

Parameters:

name	type	description
x	number	The x coordinate of the pixel to get.
y	number	The y coordinate of the pixel to get.
callback	Phaser.Types.Renderer.Snapshot.SnapshotCallback	The Function to invoke after the snapshot pixel data is extracted.

Returns:

Description:

This WebGL Renderer.

Type:

Phaser.Renderer.Canvas.CanvasRenderer

Since: 3.16.0

Source: src/renderer/canvas/CanvasRenderer.js (Line 643)

Possible examples