Class: CanvasRenderer

Phaser.Renderer.Canvas. CanvasRenderer

The Canvas Renderer is responsible for managing 2D canvas rendering contexts, including the one used by the Game's 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 17)

Members


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

config :object

The local configuration settings of the CanvasRenderer.

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

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

currentScaleMode :number

The scale mode currently in use by the Canvas Renderer.

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

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

game :Phaser.Game

The Phaser Game instance that owns this renderer.

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

gameCanvas :HTMLCanvasElement

The canvas element which the Game uses.

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

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

height :integer

The height of the canvas being rendered to.

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

scaleMode :integer

The scale mode which should be used by the CanvasRenderer.

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

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

type :integer

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

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

width :integer

The width of the canvas being rendered to.

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

Methods


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

destroy()

Destroys all object references in the Canvas Renderer.

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

init()

Prepares the game canvas for rendering.

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

onContextLost(callback)

A NOOP method for handling lost context. Intentionally empty.

Parameters:
Name Type Description
callback function

Ignored parameter.

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

onContextRestored(callback)

A NOOP method for handling restored context. Intentionally empty.

Parameters:
Name Type Description
callback function

Ignored parameter.

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

onResize(gameSize, baseSize, displaySize [, resolution])

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

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

displaySize Phaser.Structs.Size

The display Size object. The size of the canvas style width / height attributes.

resolution number <optional>

The Scale Manager resolution setting.

Since: 3.16.0
Source: src/renderer/canvas/CanvasRenderer.js (Line 233)

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

preRender()

Called at the start of the render loop.

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

render(scene, children, interpolationPercentage, camera)

Renders the Scene to the given Camera.

Parameters:
Name Type Description
scene Phaser.Scene

The Scene to render.

children Phaser.GameObjects.DisplayList

The Game Objects within the Scene to be rendered.

interpolationPercentage number

The interpolation percentage to apply. Currently unused.

camera Phaser.Cameras.Scene2D.Camera

The Scene Camera to render with.

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

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

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

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 343)
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 309)
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 326)
Returns:

The Canvas Renderer instance.

Type
Phaser.Renderer.Canvas.CanvasRenderer

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 526)
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 integer

The x coordinate to grab from.

y integer

The y coordinate to grab from.

width integer

The width of the area to grab.

height integer

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 551)
Returns:

This WebGL 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 integer

The x coordinate of the pixel to get.

y integer

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 591)
Returns:

This WebGL Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer