Phaser.Canvas

new Canvas()

The Canvas class handles everything related to creating the canvas DOM tag that Phaser will use, including styles, offset and aspect ratio.

Source - utils/Canvas.js, line 14

Methods

<static> addToDOM(canvas, parent, overflowHidden)→ {HTMLCanvasElement}

Adds the given canvas element to the DOM. The canvas will be added as a child of the given parent. If no parent is given it will be added as a child of the document.body.

Name

Type

Argument

Default

Description

canvas

HTMLCanvasElement

The canvas to be added to the DOM.

parent

string | HTMLElement

The DOM element to add the canvas to.

overflowHidden

boolean

<optional>

true

If set to true it will add the overflow='hidden' style to the parent DOM element.

HTMLCanvasElement-

Returns the source canvas.

Source - utils/Canvas.js, line 109

<static>create(parent, width, height, id, skipPool)→ {HTMLCanvasElement}

Creates a canvas DOM element. The element is not automatically added to the document.

Name

Type

Argument

Default

Description

parent

object

The object that will own the canvas that is created.

width

number

<optional>

256

The width of the canvas element.

height

number

<optional>

256

The height of the canvas element..

id

string

<optional>

(none)

If specified, and not the empty string, this will be set as the ID of the canvas element. Otherwise no ID will be set.

skipPool

boolean

<optional>

false

If true the canvas will not be placed in the CanvasPool global.

HTMLCanvasElement-

The newly created canvas element.

Source - utils/Canvas.js, line 16

<static>getSmoothingEnabled(context)→ {boolean}

Returns true if the given context has image smoothing enabled, otherwise returns false.

Name

Type

Description

context

CanvasRenderingContext2D

The context to check for smoothing on.

boolean-

True if the given context has image smoothing enabled, otherwise false.

Source - utils/Canvas.js, line 242

<static>getSmoothingPrefix(context)→ {string|null}

Gets the Smoothing Enabled vendor prefix being used on the given context, or null if not set.

Name

Type

Description

context

CanvasRenderingContext2D

The context to enable or disable the image smoothing on.

string| null-

Returns the smoothingEnabled vendor prefix, or null if not set on the context.

Source - utils/Canvas.js, line 217

<static>removeFromDOM(canvas)

Removes the given canvas element from the DOM.

Name

Type

Description

canvas

HTMLCanvasElement

The canvas to be removed from the DOM.

Source - utils/Canvas.js, line 156

<static>setBackgroundColor(canvas, color)→ {HTMLCanvasElement}

Sets the background color behind the canvas. This changes the canvas style property.

Name

Type

Argument

Default

Description

canvas

HTMLCanvasElement

The canvas to set the background color on.

color

string

<optional>

'rgb(0,0,0)'

The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.

HTMLCanvasElement-

Returns the source canvas.

Source - utils/Canvas.js, line 47

<static>setImageRenderingBicubic(canvas)→ {HTMLCanvasElement}

Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto'). Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.

Name

Type

Description

canvas

HTMLCanvasElement

The canvas to set image-rendering bicubic on.

HTMLCanvasElement-

Returns the source canvas.

Source - utils/Canvas.js, line 283

<static>setImageRenderingCrisp(canvas)→ {HTMLCanvasElement}

Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast' on webkit). Note that if this doesn't given the desired result then see the setSmoothingEnabled.

Name

Type

Description

canvas

HTMLCanvasElement

The canvas to set image-rendering crisp on.

HTMLCanvasElement-

Returns the source canvas.

Source - utils/Canvas.js, line 260

<static>setSmoothingEnabled(context, value)→ {CanvasRenderingContext2D}

Sets the Image Smoothing property on the given context. Set to false to disable image smoothing. By default browsers have image smoothing enabled, which isn't always what you visually want, especially when using pixel art in a game. Note that this sets the property on the context itself, so that any image drawn to the context will be affected. This sets the property across all current browsers but support is patchy on earlier browsers, especially on mobile.

Name

Type

Description

context

CanvasRenderingContext2D

The context to enable or disable the image smoothing on.

value

boolean

If set to true it will enable image smoothing, false will disable it.

CanvasRenderingContext2D-

Returns the source context.

Source - utils/Canvas.js, line 192

<static>setTouchAction(canvas, value)→ {HTMLCanvasElement}

Sets the touch-action property on the canvas style. Can be used to disable default browser touch actions.

Name

Type

Argument

Description

canvas

HTMLCanvasElement

The canvas to set the touch action on.

value

string

<optional>

The touch action to set. Defaults to 'none'.

HTMLCanvasElement-

The source canvas.

Source - utils/Canvas.js, line 65

<static>setTransform(context, translateX, translateY, scaleX, scaleY, skewX,skewY)→ {CanvasRenderingContext2D}

Sets the transform of the given canvas to the matrix values provided.

Name

Type

Description

context

CanvasRenderingContext2D

The context to set the transform on.

translateX

number

The value to translate horizontally by.

translateY

number

The value to translate vertically by.

scaleX

number

The value to scale horizontally by.

scaleY

number

The value to scale vertically by.

skewX

number

The value to skew horizontaly by.

skewY

number

The value to skew vertically by.

CanvasRenderingContext2D-

Returns the source context.

Source - utils/Canvas.js, line 171

<static>setUserSelect(canvas, value)→ {HTMLCanvasElement}

Sets the user-select property on the canvas style. Can be used to disable default browser selection actions.

Name

Type

Argument

Description

canvas

HTMLCanvasElement

The canvas to set the touch action on.

value

string

<optional>

The touch action to set. Defaults to 'none'.

HTMLCanvasElement-

The source canvas.

Source - utils/Canvas.js, line 85