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:
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 canvasHTMLCanvasElement The canvas to be added to the DOM.
parentstring | HTMLElement The DOM element to add the canvas to.
overflowHiddenboolean <optional>
true If set to true it will add the overflow='hidden' style to the parent DOM element.
- Source:
Returns:
Returns the source canvas.
- Type
- HTMLCanvasElement
-
<static> create(width, height, id) → {HTMLCanvasElement}
-
Creates a
canvasDOM element. The element is not automatically added to the document.Parameters:
Name Type Argument Default Description widthnumber <optional>
256 The width of the canvas element.
heightnumber <optional>
256 The height of the canvas element..
idstring <optional>
'' If given this will be set as the ID of the canvas element, otherwise no ID will be set.
- Source:
Returns:
The newly created canvas element.
- Type
- HTMLCanvasElement
-
<static> getAspectRatio(canvas) → {number}
-
Returns the aspect ratio of the given canvas.
Parameters:
Name Type Description canvasHTMLCanvasElement The canvas to get the aspect ratio from.
- Source:
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 elementHTMLElement The targeted element that we want to retrieve the offset.
pointPhaser.Point <optional>
The point we want to take the x/y values of the offset.
- Source:
Returns:
- A point objet with the offsetX and Y as its properties.
- Type
- Phaser.Point
-
<static> getSmoothingEnabled(context) → {boolean}
-
Returns
trueif the given context has image smoothing enabled, otherwise returnsfalse.Parameters:
Name Type Description contextCanvasRenderingContext2D The context to check for smoothing on.
- Source:
Returns:
True if the given context has image smoothing enabled, otherwise false.
- Type
- boolean
-
<static> removeFromDOM(canvas)
-
Removes the given canvas element from the DOM.
Parameters:
Name Type Description canvasHTMLCanvasElement The canvas to be removed from the DOM.
- Source:
-
<static> setBackgroundColor(canvas, color) → {HTMLCanvasElement}
-
Sets the background color behind the canvas. This changes the canvas style property.
Parameters:
Name Type Argument Description canvasHTMLCanvasElement The canvas to set the background color on.
colorstring <optional>
The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.
- Source:
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 canvasHTMLCanvasElement The canvas to set image-rendering bicubic on.
- Source:
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 canvasHTMLCanvasElement The canvas to set image-rendering crisp on.
- Source:
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 contextCanvasRenderingContext2D The context to enable or disable the image smoothing on.
valueboolean If set to true it will enable image smoothing, false will disable it.
- Source:
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 canvasHTMLCanvasElement The canvas to set the touch action on.
valueString <optional>
The touch action to set. Defaults to 'none'.
- Source:
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 contextCanvasRenderingContext2D The context to set the transform on.
translateXnumber The value to translate horizontally by.
translateYnumber The value to translate vertically by.
scaleXnumber The value to scale horizontally by.
scaleYnumber The value to scale vertically by.
skewXnumber The value to skew horizontaly by.
skewYnumber The value to skew vertically by.
- Source:
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 canvasHTMLCanvasElement The canvas to set the touch action on.
valueString <optional>
The touch action to set. Defaults to 'none'.
- Source:
Returns:
The source canvas.
- Type
- HTMLCanvasElement