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

boolean

isContextValid = true

Path2D

path2D

object

settings

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