Class: CanvasRenderer

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.

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

Members

antialias :boolean

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

Type:
  • boolean
Since: 3.20.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 138)

blendModes :array

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 147)

config :object

The local configuration settings of the CanvasRenderer.

Type:
  • object
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 46)

currentContext :CanvasRenderingContext2D

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 129)

drawCount :number

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

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/renderer/canvas/CanvasRenderer.js (Line 78)

game :Phaser.Game

The Phaser Game instance that owns this renderer.

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

gameCanvas :HTMLCanvasElement

The canvas element which the Game uses.

Type:
  • HTMLCanvasElement
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 106)

gameContext :CanvasRenderingContext2D

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 120)

height :number

The height of the canvas being rendered to.

Type:
  • number
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 97)

isBooted :boolean

Has this renderer fully booted yet?

Type:
  • boolean
Since: 3.50.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 208)

snapshotState :Phaser.Types.Renderer.Snapshot.SnapshotState

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:
Since: 3.16.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 158)

type :number

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

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])

Add a listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 111)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

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

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

Parameters:
Name Type Argument 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 665)

destroy()

Destroys all object references in the Canvas Renderer.

Since: 3.0.0
Overrides:
Source: src/renderer/canvas/CanvasRenderer.js (Line 821)

emit(event [, args])

Calls each of the listeners registered for a given event.

Parameters:
Name Type Argument Description
event string | symbol

The event name.
args * <optional>
<repeatable>

Additional arguments that will be passed to the event handler.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 86)
Returns:

true if the event had listeners, else false.

Type
boolean

eventNames()

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

Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 55)
Returns:
Type
Array.<(string|symbol)>

init()

Prepares the game canvas for rendering.

Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 220)

listenerCount(event)

Return the number of listeners listening to a given event.

Parameters:
Name Type Description
event string | symbol

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 75)
Returns:

The number of listeners.

Type
number

listeners(event)

Return the listeners registered for a given event.

Parameters:
Name Type Description
event string | symbol

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 64)
Returns:

The registered listeners.

Type
Array.<function()>

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

Remove the listeners of a given event.

Parameters:
Name Type Argument 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.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 151)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

on(event, fn [, context])

Add a listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 98)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

once(event, fn [, context])

Add a one-time listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 124)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

onResize(gameSize, baseSize)

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 254)

postRender()

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.

Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 503)
Fires:

preRender()

Called at the start of the render loop.

Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 352)
Fires:

removeAllListeners( [event])

Remove all listeners, or those of the specified event.

Parameters:
Name Type Argument Description
event string | symbol <optional>

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 165)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

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

Remove the listeners of a given event.

Parameters:
Name Type Argument 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.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 137)
Returns:

this.

Type
Phaser.Renderer.Canvas.CanvasRenderer

render(scene, children, camera)

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.
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 389)
Fires:

resetTransform()

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 290)

resize( [width] [, height])

Resize the main game canvas.

Parameters:
Name Type Argument Description
width number <optional>

The new width of the renderer.
height number <optional>

The new height of the renderer.
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 272)
Fires:

setAlpha(alpha)

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.
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 335)
Returns:

This CanvasRenderer object.

Type
Phaser.Renderer.Canvas.CanvasRenderer

setBlendMode(blendMode)

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

Parameters:
Name Type Description
blendMode string

The new blend mode which should be used.
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 301)
Returns:

This CanvasRenderer object.

Type
Phaser.Renderer.Canvas.CanvasRenderer

setContext( [ctx])

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

Parameters:
Name Type Argument Description
ctx CanvasRenderingContext2D <optional>
<nullable>

The new Canvas Rendering Context to draw everything to. Leave empty to reset to the Game Canvas.
Since: 3.12.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 318)
Returns:

The Canvas Renderer instance.

Type
Phaser.Renderer.Canvas.CanvasRenderer

shutdown()

Removes all listeners.

Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 31)

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

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 Argument 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.
Since: 3.0.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 570)
Returns:

This WebGL Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer

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

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.

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 Argument 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.
Since: 3.16.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 595)
Returns:

This WebGL Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer

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

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.

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 Argument 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.
Since: 3.19.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 530)
Returns:

This Canvas Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer

snapshotPixel(x, y, callback)

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.
Since: 3.16.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 635)
Returns:

This WebGL Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer