Renderer
class Renderer
a base renderer object
Constructor
new Renderer(options: Application.Settings) → {}
Name | Type | Attributes | Description |
---|---|---|---|
options | Application.Settings |
<optional> |
optional parameters for the renderer |
Summary
Properties from Renderer
string |
|
Number |
|
boolean |
|
Path2D |
|
Vector2d |
|
object |
|
string |
|
Methods from Renderer
Public Properties
depthTest: string = "sorting"
string
the default method to sort object ("sorting", "z-buffer")
isContextValid: boolean = true
boolean
true if the current rendering context is valid
path2D: Path2D
Path2D
The Path2D instance used by the renderer to draw primitives
scaleRatio: Vector2d = <1,1>
Vector2d
the scaling ratio to be applied to the main canvas
type: string = "Generic"
string
The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)
Public Methods
clearMask() → {}
disable (remove) the rendering mask set through setMask.
clearTint() → {}
clear the rendering tint set through setTint.
fill(shape: Rect | RoundRect | Polygon | Line | Ellipse) → {}
fill the given shape
getBlendMode() → {string}
returns the current blend mode for this renderer
Type | Description |
---|---|
string |
blend mode |
getCanvas() → {HTMLCanvasElement}
return a reference to the canvas which this renderer draws to
Type | Description |
---|---|
HTMLCanvasElement |
getColor() → {Color}
get the current fill & stroke style color.
Type | Description |
---|---|
Color |
current global color |
getContext() → {CanvasRenderingContext2D | WebGLRenderingContext}
return a reference to this renderer canvas corresponding Context
Type | Description |
---|---|
CanvasRenderingContext2D | WebGLRenderingContext |
getContext2d(canvas: HTMLCanvasElement, transparent: boolean) → {CanvasRenderingContext2D}
Returns the 2D Context object of the given Canvas
Also configures anti-aliasing and blend modes based on constructor options.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
canvas | HTMLCanvasElement | |||
transparent | boolean |
<optional> |
true |
use false to disable transparency |
Type | Description |
---|---|
CanvasRenderingContext2D |
getHeight() → {number}
return the height of the system Canvas
Type | Description |
---|---|
number |
height of the system Canvas |
getScreenCanvas() → {HTMLCanvasElement}
return a reference to the screen canvas
Type | Description |
---|---|
HTMLCanvasElement |
getScreenContext() → {CanvasRenderingContext2D}
return a reference to the screen canvas corresponding 2d Context
(will return buffered context if double buffering is enabled, or a reference to the Screen Context)
Type | Description |
---|---|
CanvasRenderingContext2D |
getWidth() → {number}
return the width of the system Canvas
Type | Description |
---|---|
number |
globalAlpha() → {number}
return the current global alpha
Type | Description |
---|---|
number |
overlaps(bounds: Rect | Bounds) → {boolean}
check if the given rect or bounds overlaps with the renderer screen coordinates
Type | Description |
---|---|
boolean |
true if overlaps |
resize(width: number, height: number) → {}
resizes the system canvas
Name | Type | Description |
---|---|---|
width | number |
new width of the canvas |
height | number |
new height of the canvas |
setAntiAlias(context: CanvasRenderingContext2D, enable: boolean) → {}
enable/disable image smoothing (scaling interpolation) for the given context
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
context | CanvasRenderingContext2D | |||
enable | boolean |
<optional> |
false |
setMask(mask: Rect | RoundRect | Polygon | Line | Ellipse, invert: boolean) → {}
A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. Mask are not preserved through renderer context save and restore.
setProjection(matrix: Matrix3d) → {}
set/change the current projection matrix (WebGL only)
Name | Type | Description |
---|---|---|
matrix | Matrix3d |
setTint(tint: Color, alpha: number) → {}
set a coloring tint for sprite based renderables
Name | Type | Attributes | Description |
---|---|---|---|
tint | Color |
the tint color |
|
alpha | number |
<optional> |
an alpha value to be applied to the tint |
stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean) → {}
stroke the given shape
tint(src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas, color: Color | string, mode: string) → {HTMLCanvasElement | OffscreenCanvas}
tint the given image or canvas using the given color
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
src | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas |
the source image to be tinted |
||
color | Color | string |
the color that will be used to tint the image |
||
mode | string |
<optional> |
"multiply" |
the composition mode used to tint the image |
Type | Description |
---|---|
HTMLCanvasElement | OffscreenCanvas |
a new canvas element representing the tinted image |
toBlob(options: Object) → {Promise}
creates a Blob object representing the last rendered frame
renderer.convertToBlob().then((blob) => console.log(blob));
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options | Object |
<optional> |
An object with the following properties: |
|
options.type | String |
<optional> |
"image/png" |
A string indicating the image format |
options.quality | Number |
<optional> |
A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |
Type | Description |
---|---|
Promise |
A Promise returning a Blob object representing the last rendered frame |
toDataURL(options: Object) → {Promise}
returns a data URL containing a representation of the last frame rendered
renderer.toDataURL().then((dataURL) => console.log(dataURL));
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options | Object |
<optional> |
An object with the following properties: |
|
options.type | String |
<optional> |
"image/png" |
A string indicating the image format |
options.quality | Number |
<optional> |
A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |
Type | Description |
---|---|
Promise |
A Promise returning a string containing the requested data URL. |
toImageBitmap(options: Object) → {Promise}
creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)
renderer.transferToImageBitmap().then((image) => console.log(image));
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options | Object |
<optional> |
An object with the following properties: |
|
options.type | String |
<optional> |
"image/png" |
A string indicating the image format |
options.quality | Number |
<optional> |
A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |
Type | Description |
---|---|
Promise |
A Promise returning an ImageBitmap. |