Renderer

class Renderer

a base renderer object

Constructor


new Renderer(options: Application.Settings) → {}
Parameters:
Name Type Attributes Description
options Application.Settings

<optional>

optional parameters for the renderer

Summary


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)
Promise
toBlob(options: object)
Promise
toDataURL(options: object)
Promise
toImageBitmap(options: object)

Public Properties


depthTest renderer.js:47
depthTest: string = "sorting"

string

the default method to sort object ("sorting", "z-buffer")

designRatio renderer.js:26
designRatio: number

number

the requested video size ratio

isContextValid renderer.js:40
isContextValid: boolean = true

boolean

true if the current rendering context is valid

path2D renderer.js:55
path2D: Path2D

Path2D

The Path2D instance used by the renderer to draw primitives

scaleRatio renderer.js:33
scaleRatio: Vector2d = <1,1>

Vector2d

the scaling ratio to be applied to the main canvas

settings renderer.js:19
settings: object

object

The given constructor options

type renderer.js:61
type: string = "Generic"

string

The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)

Public Methods


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

prepare the framebuffer for drawing a new frame

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

disable (remove) the rendering mask set through setMask.

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

clear the rendering tint set through setTint.

See: Renderer#setTint
fill renderer.js:334
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:114
flush() → {}

render the main framebuffer on screen

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

returns the current blend mode for this renderer

Returns:
Type Description
string

blend mode

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

return a reference to the canvas which this renderer draws to

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

get the current fill & stroke style color.

Returns:
Type Description
Color

current global color

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

return a reference to this renderer canvas corresponding Context

Returns:
Type Description
CanvasRenderingContext2D | WebGLRenderingContext
getContext2d renderer.js:160
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:204
getHeight() → {number}

return the height of the system Canvas

Returns:
Type Description
number

height of the system Canvas

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

return a reference to the screen canvas

Returns:
Type Description
HTMLCanvasElement
See: getCanvas();
getScreenContext deprecated.js:82
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:196
getWidth() → {number}

return the width of the system Canvas

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

return the current global alpha

Returns:
Type Description
number
overlaps renderer.js:228
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:119
reset() → {}

Reset context state

resize renderer.js:241
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:260
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:368
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:287
setProjection(matrix: Matrix3d) → {}

set/change the current projection matrix (WebGL only)

Parameters:
Name Type Description
matrix Matrix3d
setTint renderer.js:384
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:295
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:342
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

toBlob renderer.js:404
toBlob(options: object) → {Promise}

creates a Blob object representing the last rendered frame

renderer.convertToBlob().then((blob) => console.log(blob));
Parameters:
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.

Returns:
Type Description
Promise

A Promise returning a Blob object representing the last rendered frame

toDataURL renderer.js:445
toDataURL(options: object) → {Promise}

returns a data URL containing a representation of the last frame rendered

renderer.toDataURL().then((dataURL) => console.log(dataURL));
Parameters:
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.

Returns:
Type Description
Promise

A Promise returning a string containing the requested data URL.

toImageBitmap renderer.js:423
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));
Parameters:
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.

Returns:
Type Description
Promise

A Promise returning an ImageBitmap.


Powered by webdoc!