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

Public Properties


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

string

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

designRatio renderer.js:34
designRatio: number

number

the requested video size ratio

height renderer.js:117
height

return the height of the canvas which this renderer draws to

Returns:
Type Description
number

height of the system Canvas

isContextValid renderer.js:48
isContextValid: boolean = true

boolean

true if the current rendering context is valid

path2D renderer.js:63
path2D: Path2D

Path2D

The Path2D instance used by the renderer to draw primitives

renderTarget renderer.js:20
renderTarget: CanvasRenderTarget

CanvasRenderTarget

The renderer renderTarget

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

Vector2d

the scaling ratio to be applied to the main canvas

settings renderer.js:27
settings: object

object

The given constructor options

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

string

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

width renderer.js:129
width

return the width of the canvas which this renderer draws to

Returns:
Type Description
number

width of the system Canvas

Public Methods


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

prepare the framebuffer for drawing a new frame

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

disable (remove) the rendering mask set through setMask.

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

clear the rendering tint set through setTint.

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

render the main framebuffer on screen

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

returns the current blend mode for this renderer

Returns:
Type Description
string

blend mode

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

return a reference to the canvas which this renderer draws to

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

get the current fill & stroke style color.

Returns:
Type Description
Color

current global color

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

return a reference to this renderer canvas corresponding Context

Returns:
Type Description
CanvasRenderingContext2D | WebGLRenderingContext
getContext2d renderer.js:191
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
getScreenCanvas deprecated.js:70
getScreenCanvas() → {HTMLCanvasElement}
Deprecated: since 13.1.0

return a reference to the screen canvas

Returns:
Type Description
HTMLCanvasElement
See: getCanvas();
getScreenContext deprecated.js:83
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();
globalAlpha renderer.js:235
globalAlpha() → {number}

return the current global alpha

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

Reset context state

resize renderer.js:255
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:274
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:364
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:283
setProjection(matrix: Matrix3d) → {}

set/change the current projection matrix (WebGL only)

Parameters:
Name Type Description
matrix Matrix3d
setTint renderer.js:380
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:291
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:338
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:400
toBlob(type: string, quality: number) → {Promise}

creates a Blob object representing the last rendered frame

renderer.convertToBlob().then((blob) => console.log(blob));
Parameters:
Name Type Attributes Default Description
type string

<optional>

"image/png"

A string indicating the image format

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:425
toDataURL(type: string, quality: number) → {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
type string

<optional>

"image/png"

A string indicating the image format

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:412
toImageBitmap(type: string, quality: number) → {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
type string

<optional>

"image/png"

A string indicating the image format

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!