Class: Phaser.Canvas

Constructor

new Canvas()

Source code: utils/Canvas.js (Line 14)

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

Returns

HTMLCanvasElement -

Returns the source canvas.

Source code: 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.

Parameters

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.

Returns

HTMLCanvasElement -

The newly created canvas element.

Source code: utils/Canvas.js (Line 16)

<static> getSmoothingEnabled(context) → {boolean}

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

Parameters

Name	Type	Description
context	CanvasRenderingContext2D	The context to check for smoothing on.

Returns

boolean -

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

Source code: 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.

Parameters

Name	Type	Description
context	CanvasRenderingContext2D	The context to enable or disable the image smoothing on.

Returns

string | null -

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

Source code: utils/Canvas.js (Line 217)

<static> removeFromDOM(canvas)

Removes the given canvas element from the DOM.

Parameters

Name	Type	Description
canvas	HTMLCanvasElement	The canvas to be removed from the DOM.

Source code: utils/Canvas.js (Line 156)

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

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

Parameters

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.

Returns

HTMLCanvasElement -

Returns the source canvas.

Source code: 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.

Parameters

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

Returns

HTMLCanvasElement -

Returns the source canvas.

Source code: 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.

Parameters

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

Returns

HTMLCanvasElement -

Returns the source canvas.

Source code: 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.

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.

Returns

CanvasRenderingContext2D -

Returns the source context.

Source code: 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.

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

Returns

HTMLCanvasElement -

The source canvas.

Source code: 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.

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.

Returns

CanvasRenderingContext2D -

Returns the source context.

Source code: 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.

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

Returns

HTMLCanvasElement -

The source canvas.

Source code: utils/Canvas.js (Line 85)