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
number	height
boolean	isContextValid = true
Path2D	path2D
CanvasRenderTarget	renderTarget
Vector2d	scaleRatio = <1,1>
object	settings
string	type = "Generic"
number	width

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()
HTMLCanvasElement	getScreenCanvas()
CanvasRenderingContext2D	getScreenContext()
number	globalAlpha()
boolean	overlaps(bounds: Rect \| Bounds)
	reset() Reset context state
	resize(width: number, height: number)
	setAntiAlias(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(type: string, quality: number)
Promise	toDataURL(type: string, quality: number)
Promise	toImageBitmap(type: string, quality: number)

Public Properties

depthTest renderer.js:56

depthTest: string = "sorting"

string

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

designRatio renderer.js:35

designRatio: number

number

the requested video size ratio

height renderer.js:105

height

return the height of the canvas which this renderer draws to

Returns:
Type	Description
number	height of the system Canvas

isContextValid renderer.js:49

isContextValid: boolean = true

boolean

true if the current rendering context is valid

path2D renderer.js:64

path2D: Path2D

Path2D

The Path2D instance used by the renderer to draw primitives

renderTarget renderer.js:18

renderTarget: CanvasRenderTarget

CanvasRenderTarget

The renderer renderTarget

scaleRatio renderer.js:42

scaleRatio: Vector2d = <1,1>

Vector2d

the scaling ratio to be applied to the main canvas

settings renderer.js:28

settings: object

object

The given constructor options

type renderer.js:70

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

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

clear() → {}

prepare the framebuffer for drawing a new frame

clearMask renderer.js:322

clearMask() → {}

disable (remove) the rendering mask set through setMask.

See: Renderer#setMask

clearTint renderer.js:339

clearTint() → {}

clear the rendering tint set through setTint.

See: Renderer#setTint

fill renderer.js:281

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

flush() → {}

render the main framebuffer on screen

getBlendMode renderer.js:171

getBlendMode() → {string}

returns the current blend mode for this renderer

Returns:
Type	Description
string	blend mode

getCanvas renderer.js:155

getCanvas() → {HTMLCanvasElement}

return a reference to the current render target corresponding canvas which this renderer draws to

Returns:
Type	Description
HTMLCanvasElement

getColor renderer.js:179

getColor() → {Color}

get the current fill & stroke style color.

Returns:
Type	Description
Color	current global color

getContext renderer.js:163

getContext() → {CanvasRenderingContext2D | WebGLRenderingContext}

return a reference to the current render target corresponding Context

Returns:
Type	Description
CanvasRenderingContext2D \| WebGLRenderingContext

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

globalAlpha() → {number}

return the current global alpha

Returns:
Type	Description
number

overlaps renderer.js:195

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

reset() → {}

Reset context state

resize renderer.js:207

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

setAntiAlias(enable: boolean) → {}

enable/disable image smoothing (scaling interpolation) for the current render target

Parameters:
Name	Type	Attributes	Default	Description
enable	boolean	<optional>	false

setMask renderer.js:312

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

setProjection(matrix: Matrix3d) → {}

set/change the current projection matrix (WebGL only)

Parameters:
Name	Type	Description
matrix	Matrix3d

setTint renderer.js:328

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

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

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 or offscreencanvas (if supported) element representing the tinted image

toBlob renderer.js:348

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

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

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.