Class: CanvasRenderer

Tiny. CanvasRenderer

The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support WebGL. Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)

new Tiny.CanvasRenderer(width, height, options)

Name Type Description
width number

the width of the screen

height number

the height of the screen

options object optional

The optional renderer parameters

Name Type Default Description
view HTMLCanvasElement optional

the canvas to use as a view, optional

antialias boolean false optional

sets antialias (only applicable in chrome at the moment)

autoResize boolean false optional

If the render view is automatically resized, default false

backgroundColor number 0x000000 optional

The background color of the rendered area (shown if not transparent).

clearBeforeRender boolean true optional

This sets if the CanvasRenderer will clear the canvas or not before the new render pass.

resolution number 1 optional

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.

roundPixels boolean false optional

If true Tiny will Math.floor() x/y values when rendering, stopping pixel interpolation.

transparent boolean false optional

If the render view is transparent, default false




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


The background color to fill if not transparent

blendModesobject.<string, mixed>

Tracks the blend modes useful for this renderer.


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.


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

  • 1.2.0


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

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


The supplied constructor options.


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.

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.


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


Boolean flag controlling canvas refresh.


The resolution / device pixel ratio of the renderer

Default Value:
  • 1


The canvas 2d context that everything is drawn with.


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

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

Its safe to use as filterArea or hitArea for whole stage


The canvas property used to set the canvas smoothing property.


Whether the render view is transparent


The type of the renderer.

Default Value:


The canvas element that everything is drawn to


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


Clear the canvas of renderer.

Name Type Description
clearColor string optional

Clear the canvas with this color, except the canvas is transparent.

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}

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.

Type Description
Tiny.Texture a texture of the graphics object

Checks if blend mode has changed.

  • 1.2.0

registerPlugin(pluginName, ctor)

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)

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)

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

Sets the blend mode of the renderer.

Name Type Description
blendMode number

See Tiny.BLEND_MODES for valid values.


Fired after rendering finishes.

Fired before rendering starts.

Documentation generated by JSDoc 3.4.3 on Fri Jul 09 2021 19:32:26 GMT+0800 (CST)