Renderer

class Renderer

a base renderer object

Constructor


new Renderer(options: object) → {}
Parameters:
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

Methods from Renderer

clear()

prepare the framebuffer for drawing a new frame

clearMask()
clearTint()
fill(shape: Rect | RoundRect | Polygon | Line | Ellipse)
flush()

render the main framebuffer on screen

string
getBlendMode()
HTMLCanvasElement
getCanvas()
Color
getColor()
CanvasRenderingContext2D | WebGLRenderingContext
getContext()
CanvasRenderingContext2D
getContext2d(canvas: HTMLCanvasElement, transparent: boolean)
number
getHeight()
HTMLCanvasElement
getScreenCanvas()
CanvasRenderingContext2D
getScreenContext()
number
getWidth()
number
globalAlpha()
boolean
overlaps(bounds: Rect | Bounds)
reset()

Reset context state

resize(width: number, height: number)
setAntiAlias(context: CanvasRenderingContext2D, enable: boolean)
setMask(mask: Rect | RoundRect | Polygon | Line | Ellipse, invert: boolean)
setProjection(matrix: Matrix3d)
setTint(tint: Color, alpha: number)
stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean)
HTMLCanvasElement | OffscreenCanvas
tint(src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas, color: Color | string, mode: string)

Public Properties


isContextValid renderer.js:44
isContextValid: boolean = true

true if the current rendering context is valid

path2D renderer.js:51
path2D: Path2D

The Path2D instance used by the renderer to draw primitives

settings renderer.js:37
settings: object

The given constructor options

Public Methods


clear renderer.js:103
clear() → {}

prepare the framebuffer for drawing a new frame

clearMask renderer.js:370
clearMask() → {}

disable (remove) the rendering mask set through setMask.

See: Renderer#setMask
clearTint renderer.js:387
clearTint() → {}

clear the rendering tint set through setTint.

See: Renderer#setTint
fill renderer.js:324
fill(shape: Rect | RoundRect | Polygon | Line | Ellipse) → {}

fill the given shape

Parameters:
Name Type Description
shape Rect | RoundRect | Polygon | Line | Ellipse

a shape object to fill

flush renderer.js:108
flush() → {}

render the main framebuffer on screen

getBlendMode renderer.js:146
getBlendMode() → {string}

returns the current blend mode for this renderer

Returns:
Type Description
string

blend mode

getCanvas renderer.js:129
getCanvas() → {HTMLCanvasElement}

return a reference to the canvas which this renderer draws to

Returns:
Type Description
HTMLCanvasElement
getColor renderer.js:206
getColor() → {Color}

get the current fill & stroke style color.

Returns:
Type Description
Color

current global color

getContext renderer.js:138
getContext() → {CanvasRenderingContext2D | WebGLRenderingContext}

return a reference to this renderer canvas corresponding Context

Returns:
Type Description
CanvasRenderingContext2D | WebGLRenderingContext
getContext2d renderer.js:154
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.

Parameters:
Name Type Attributes Default Description
canvas HTMLCanvasElement
transparent boolean

<optional>

true

use false to disable transparency

Returns:
Type Description
CanvasRenderingContext2D
getHeight renderer.js:198
getHeight() → {number}

return the height of the system Canvas

Returns:
Type Description
number

height of the system Canvas

getScreenCanvas deprecated.js:103
getScreenCanvas() → {HTMLCanvasElement}
Deprecated: since 13.1.0

return a reference to the screen canvas

Returns:
Type Description
HTMLCanvasElement
See: getCanvas();
getScreenContext deprecated.js:116
getScreenContext() → {CanvasRenderingContext2D}
Deprecated: since 13.1.0

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)

Returns:
Type Description
CanvasRenderingContext2D
See: getContext();
getWidth renderer.js:190
getWidth() → {number}

return the width of the system Canvas

Returns:
Type Description
number
globalAlpha renderer.js:214
globalAlpha() → {number}

return the current global alpha

Returns:
Type Description
number
overlaps renderer.js:222
overlaps(bounds: Rect | Bounds) → {boolean}

check if the given rect or bounds overlaps with the renderer screen coordinates

Parameters:
Name Type Description
bounds Rect | Bounds
Returns:
Type Description
boolean

true if overlaps

reset renderer.js:113
reset() → {}

Reset context state

resize renderer.js:235
resize(width: number, height: number) → {}

resizes the system canvas

Parameters:
Name Type Description
width number

new width of the canvas

height number

new height of the canvas

setAntiAlias renderer.js:254
setAntiAlias(context: CanvasRenderingContext2D, enable: boolean) → {}

enable/disable image smoothing (scaling interpolation) for the given context

Parameters:
Name Type Attributes Default Description
context CanvasRenderingContext2D
enable boolean

<optional>

false
setMask renderer.js:360
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.

Parameters:
Name Type Attributes Default Description
mask Rect | RoundRect | Polygon | Line | Ellipse

<optional>

the shape defining the mask to be applied

invert boolean

<optional>

false

either the given shape should define what is visible (default) or the opposite

setProjection renderer.js:281
setProjection(matrix: Matrix3d) → {}

set/change the current projection matrix (WebGL only)

Parameters:
Name Type Description
matrix Matrix3d
setTint renderer.js:376
setTint(tint: Color, alpha: number) → {}

set a coloring tint for sprite based renderables

Parameters:
Name Type Attributes Description
tint Color

the tint color

alpha number

<optional>

an alpha value to be applied to the tint

stroke renderer.js:289
stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean) → {}

stroke the given shape

Parameters:
Name Type Attributes Default Description
shape Rect | RoundRect | Polygon | Line | Ellipse

a shape object to stroke

fill boolean

<optional>

false

fill the shape with the current color if true

tint renderer.js:334
tint(src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas, color: Color | string, mode: string) → {HTMLCanvasElement | OffscreenCanvas}

tint the given image or canvas using the given color

Parameters:
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

Returns:
Type Description
HTMLCanvasElement | OffscreenCanvas

a new canvas element representing the tinted image


Powered by webdoc!