Renderer
class Renderer
a base renderer object
Constructor
new Renderer(options: object) → {}
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options | object |
The renderer parameters |
||
options.width | number |
The width of the canvas without scaling |
||
options.height | number |
The height of the canvas without scaling |
||
options.canvas | HTMLCanvasElement |
<optional> |
The html canvas to draw to on screen |
|
options.antiAlias | boolean |
<optional> |
false |
Whether to enable anti-aliasing, use false (default) for a pixelated effect. |
options.failIfMajorPerformanceCaveat | boolean |
<optional> |
true |
If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls. |
options.transparent | boolean |
<optional> |
false |
Whether to enable transparency on the canvas |
options.premultipliedAlpha | boolean |
<optional> |
true |
in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled |
options.blendMode | boolean |
<optional> |
"normal" |
the default blend mode to use ("normal", "multiply") |
options.subPixel | boolean |
<optional> |
false |
Whether to enable subpixel rendering (performance hit when enabled) |
options.verbose | boolean |
<optional> |
false |
Enable the verbose mode that provides additional details as to what the renderer is doing |
options.zoomX | number |
<optional> |
width |
The actual width of the canvas with scaling applied |
options.zoomY | number |
<optional> |
height |
The actual height of the canvas with scaling applied |
Summary
Properties from Renderer
boolean |
|
Path2D |
|
object |
|
Methods from Renderer
Public Properties
isContextValid: boolean = true
true if the current rendering context is valid
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 |