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 code: system/Canvas.js, line 13
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: system/Canvas.js, line 107
-
<static> create(width, height, id) → {HTMLCanvasElement}
-
Creates a
canvas
DOM element. The element is not automatically added to the document.Parameters
Name Type Argument Default Description 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.
Returns
HTMLCanvasElement -The newly created canvas element.
- Source code: system/Canvas.js, line 15
-
<static> getAspectRatio(canvas) → {number}
- This method is deprecated and should not be used. It may be removed in the future.
- Deprecated:
- 2.1.4 - User Phaser.DOM.getAspectRatio
- Source code: system/Canvas.js, line 279
-
<static> getOffset(element, point) → {Phaser.Point}
- This method is deprecated and should not be used. It may be removed in the future.
- A point objet with the offsetX and Y as its properties.
- Deprecated:
- 2.1.4 - Use Phaser.DOM.getOffset
- Source code: system/Canvas.js, line 268
-
<static> getSmoothingEnabled(context) → {boolean}
-
Returns
true
if the given context has image smoothing enabled, otherwise returnsfalse
.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: system/Canvas.js, line 214
-
<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: system/Canvas.js, line 154
-
<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.
Returns
HTMLCanvasElement -Returns the source canvas.
- Source code: system/Canvas.js, line 45
-
<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: system/Canvas.js, line 249
-
<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: system/Canvas.js, line 227
-
<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: system/Canvas.js, line 190
-
<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: system/Canvas.js, line 63
-
<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: system/Canvas.js, line 169
-
<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: system/Canvas.js, line 83
Returns the aspect ratio of the given canvas.
Parameters
Name | Type | Description |
---|---|---|
canvas |
HTMLCanvasElement | The canvas to get the aspect ratio from. |
Returns
The ratio between canvas' width and height.
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. |