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

Properties from Renderer

string	depthTest = "sorting"
number	designRatio
boolean	isContextValid = true
Path2D	path2D
Vector2d	scaleRatio = <1,1>
object	settings
string	type = "Generic"

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.