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

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

config :object

The local configuration settings of the CanvasRenderer.

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

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

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

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

game :Phaser.Game

The Phaser Game instance that owns this renderer.

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

gameCanvas :HTMLCanvasElement

The canvas element which the Game uses.

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

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

height :integer

The height of the canvas being rendered to.

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

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

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

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

width :integer

The width of the canvas being rendered to.

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

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

destroy()

Destroys all object references in the Canvas Renderer.

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

init()

Prepares the game canvas for rendering.

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

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

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

preRender()

Called at the start of the render loop.

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

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

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

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

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 325)
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 291)
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 308)
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 548)
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 573)
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 integer <optional>
0

The x coordinate to grab from.

y integer <optional>
0

The y coordinate to grab from.

width integer <optional>
canvas.width

The width of the area to grab.

height integer <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 508)
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 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 613)
Returns:

This WebGL Renderer.

Type
Phaser.Renderer.Canvas.CanvasRenderer