Phaser Class: Canvas

new Canvas()

The Canvas class handles everything related to the <canvas> tag as a DOM Element, like styles, offset, aspect ratio

Source:

system/Canvas.js, line 3

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.

Parameters:

Name	Type	Description
`canvas`	HTMLCanvasElement	The canvas to set the touch action on.
`parent`	string \| HTMLElement	The DOM element to add the canvas to. Defaults to ''.
`overflowHidden`	boolean	If set to true it will add the overflow='hidden' style to the parent DOM element.

Source:

system/Canvas.js, line 134

Returns:

Returns the source canvas.

Type: HTMLCanvasElement

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

Creates the <canvas> tag

Parameters:

Name	Type	Description
`width`	number	The desired width.
`height`	number	The desired height.

Source:

system/Canvas.js, line 15

Returns:

The newly created <canvas> tag.

Type: HTMLCanvasElement

<static> getAspectRatio(canvas) → {number}

Returns the aspect ratio of the given canvas.

Parameters:

Name	Type	Description
`canvas`	HTMLCanvasElement	The canvas to get the aspect ratio from.

Source:

system/Canvas.js, line 61

Returns:

The ratio between canvas' width and height.

Type: number

<static> getOffset(element, point) → {Phaser.Point}

Get the DOM offset values of any given element

Parameters:

Name	Type	Argument	Description
`element`	HTMLElement		The targeted element that we want to retrieve the offset.
`point`	Phaser.Point	<optional>	The point we want to take the x/y values of the offset.

Source:

system/Canvas.js, line 37

Returns:

A point objet with the offsetX and Y as its properties.

Type: Phaser.Point

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

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

Parameters:

Name	Type	Argument	Description
`canvas`	HTMLCanvasElement		The canvas to set the background color on.
`color`	string	<optional>	The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.

Source:

system/Canvas.js, line 72

Returns:

Returns the source canvas.

Type: HTMLCanvasElement

<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.

Parameters:

Name	Type	Description
`canvas`	HTMLCanvasElement	The canvas to set image-rendering bicubic on.

Source:

system/Canvas.js, line 245

Returns:

Returns the source canvas.

Type: HTMLCanvasElement

<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.

Parameters:

Name	Type	Description
`canvas`	HTMLCanvasElement	The canvas to set image-rendering crisp on.

Source:

system/Canvas.js, line 226

Returns:

Returns the source canvas.

Type: HTMLCanvasElement

<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.

Parameters:

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.

Source:

system/Canvas.js, line 202

Returns:

Returns the source context.

Type: CanvasRenderingContext2D

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

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

Parameters:

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'.

Source:

system/Canvas.js, line 90

Returns:

The source canvas.

Type: HTMLCanvasElement

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

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

Parameters:

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.

Source:

system/Canvas.js, line 181

Returns:

Returns the source context.

Type: CanvasRenderingContext2D

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

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

Parameters:

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'.

Source:

system/Canvas.js, line 110

Returns:

The source canvas.

Type: HTMLCanvasElement