Class: Renderer

Renderer(canvas, options)

new Renderer(canvas, options)

The renderer is responsible for drawing the objects structure into the canvas element and manage its rendering state. Object are updated by the renderer before drawing, the renderer sorts the objects by layer, checks for pointer events and draw the objects into the screen. Input handling is also performed by the renderer (it is also used for the event handling).
Parameters:
Name Type Description
canvas Element Canvas to render the content to.
options Object Renderer canvas options.
Source:

Members

autoClear :boolean

Indicates if the canvas should be automatically cleared before new frame is drawn. If set to false the user should clear the frame before drawing.
Type:
  • boolean
Source:

canvas :Element

Canvas DOM element, the user needs to manage the canvas state. The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
Type:
  • Element
Source:

container :Element

Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element. If no division is defined the canvas parent element is used by default to place these objects. The DOM container to be used can be obtained using the getDomContainer() method.
Type:
  • Element
Source:

context :CanvasRenderingContext2D

Canvas 2D rendering context used to draw content. The options passed thought the constructor are applied to the context created.
Type:
  • CanvasRenderingContext2D
Source:

manager :EventManager

Event manager for DOM events created by the renderer. Created automatically when the renderer is created. Disposed automatically when the renderer is destroyed.
Type:
Source:

pointer :Pointer

Pointer input handler object, automatically updated by the renderer. The pointer is attached to the DOM window and to the canvas provided by the user.
Type:
Source:

Methods

createRenderLoop(group, viewport, onUpdate) → {AnimationTimer}

Creates a infinite render loop to render the group into a viewport each frame. Automatically creates a viewport controls object, used for the user to control the viewport. The render loop can be accessed trough the animation timer returned. Should be stopped when no longer necessary to prevent memory/code leaks.
Parameters:
Name Type Description
group Object2D Object to be rendered, alongside with all its children. Object2D can be used as a container to group objects.
viewport Viewport Viewport into the scene.
onUpdate function Function called before rendering the frame, can be used for additional logic code. Object logic should be directly written in the update method of objects.
Source:
Returns:
Animation timer created for this render loop. Should be stopped when no longer necessary.
Type
AnimationTimer

dispose()

Dispose the renderer object, clears the pointer events attached to the window/canvas. Should be called if the renderer is no longer in use to prevent code/memory leaks.
Source:

getDomContainer() → {Element}

Get the DOM container to be used to store DOM and SVG objects. Can be set using the container attribute, by default the canvas parent element is used.
Source:
Returns:
DOM element selected for objects.
Type
Element

update(object, viewport)

Renders a object using a user defined viewport into a canvas element. Before rendering automatically updates the input handlers and calculates the objects/viewport transformation matrices. The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one. Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
Parameters:
Name Type Description
object Object2D Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.
viewport Viewport Viewport to be updated (should be the one where the objects will be rendered after).
Source: