Class: CanvasRenderer

Extends

• Tiny.SystemRenderer

Members

autoResizeboolean

Whether css dimensions of canvas view should be resized to screen dimensions automatically

backgroundColornumber

The background color to fill if not transparent

blendModesobject.<string, mixed>

Tracks the blend modes useful for this renderer.

clearBeforeRenderboolean

This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
If the scene is NOT transparent Tiny will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent Tiny will use clearRect to clear the canvas every frame. Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.

contextCanvasRenderingContext2D

The currently active canvas 2d context (could change with renderTextures)

Version:

• 1.2.0

readonlyheightnumber

Same as view.height, actual number of pixels in the canvas by vertical

maskManagerTiny.CanvasMaskManager

Instance of a CanvasMaskManager, handles masking when using the canvas renderer.

readonlyoptionsobject

The supplied constructor options.

readonlypluginsobject

Collection of installed plugins. These are included by default in TinyJS, but can be excluded by creating a custom build. Consult the README for more information about creating custom builds and excluding plugins.

Properties:

Name	Type	Description
accessibility	Tiny.accessibility.AccessibilityManager	Support tabbing interactive elements.
extract	Tiny.extract.CanvasExtract	Extract image data from renderer.
interaction	Tiny.interaction.InteractionManager	Handles mouse, touch and pointer events.
prepare	Tiny.prepare.CanvasPrepare	Pre-render display objects.

preserveDrawingBufferboolean

The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.

refreshboolean

Boolean flag controlling canvas refresh.

resolutionnumber

The resolution / device pixel ratio of the renderer

Default Value:

• 1

rootContextCanvasRenderingContext2D

The canvas 2d context that everything is drawn with.

roundPixelsboolean

If true Tiny will Math.floor() x/y values when rendering, stopping pixel interpolation.
Handy for crisp pixel art and speed on legacy devices.

screenTiny.Rectangle

Measurements of the screen. (0, 0, screenWidth, screenHeight)

Its safe to use as filterArea or hitArea for whole stage

smoothPropertystring

The canvas property used to set the canvas smoothing property.

transparentboolean

Whether the render view is transparent

typenumber

The type of the renderer.

Default Value:

• Tiny.RENDERER_TYPE.UNKNOWN

See:

• Tiny.RENDERER_TYPE

viewHTMLCanvasElement

The canvas element that everything is drawn to

readonlywidthnumber

Same as view.width, actual number of pixels in the canvas by horizontal

Methods

clear(clearColor)

tiny/core/renderers/canvas/CanvasRenderer.js, line 218

Clear the canvas of renderer.

Name	Type	Description
clearColor	string	optional Clear the canvas with this color, except the canvas is transparent.

destroy(removeView)

tiny/core/renderers/canvas/CanvasRenderer.js, line 250

Removes everything from the renderer and optionally removes the Canvas DOM element.

Name	Type	Default	Description
removeView	boolean	false	optional Removes the Canvas element from the DOM.

inherited generateTexture(displayObject, scaleMode, resolution, region) ❯ {Tiny.Texture}

tiny/core/renderers/SystemRenderer.js, line 231

Useful function that returns a texture of the display object that can then be used to create sprites
This can be quite useful if your displayObject is complicated and needs to be reused multiple times.

Name	Type	Description
displayObject	Tiny.DisplayObject	The displayObject the object will be generated from
scaleMode	number	Should be one of the scaleMode consts
resolution	number	The resolution / device pixel ratio of the texture being generated
region	Tiny.Rectangle	optional The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.

Returns:

Type	Description
Tiny.Texture	a texture of the graphics object

invalidateBlendMode()

tiny/core/renderers/canvas/CanvasRenderer.js, line 289

Checks if blend mode has changed.

Version:

• 1.2.0

registerPlugin(pluginName, ctor)

tiny/core/renderers/canvas/CanvasRenderer.js, line 306

Adds a plugin to the renderer.

Name	Type	Description
pluginName	string	The name of the plugin.
ctor	function	The constructor function or class for the plugin.

render(displayObject, renderTexture, clear, transform, skipUpdateTransform)

tiny/core/renderers/canvas/CanvasRenderer.js, line 123

Renders the object to this canvas view

Name	Type	Default	Description
displayObject	Tiny.DisplayObject		The object to be rendered
renderTexture	Tiny.RenderTexture		optional A render texture to be rendered to. If unset, it will render to the root context.
clear	boolean	false	optional Whether to clear the canvas before drawing
transform	Tiny.Transform		optional A transformation to be applied
skipUpdateTransform	boolean	false	optional Whether to skip the update transform

resize(screenWidth, screenHeight)

tiny/core/renderers/canvas/CanvasRenderer.js, line 274

Resizes the canvas view to the specified width and height.

Name	Type	Description
screenWidth	number	the new width of the screen
screenHeight	number	the new height of the screen

setBlendMode(blendMode)

tiny/core/renderers/canvas/CanvasRenderer.js, line 236

Sets the blend mode of the renderer.

Name	Type	Description
blendMode	number	See Tiny.BLEND_MODES for valid values.

Events

postrender

tiny/core/renderers/canvas/CanvasRenderer.js, line 101

Fired after rendering finishes.

prerender

tiny/core/renderers/canvas/CanvasRenderer.js, line 107

Fired before rendering starts.