# 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:
  - Renderer.js, line 17

### 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:
  - Renderer.js, line 97

#### 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:
  - Renderer.js, line 56

#### 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:
  - Renderer.js, line 67

#### 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:
  - Renderer.js, line 76

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

- EventManager

Source:
  - Renderer.js, line 38

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

- Pointer

Source:
  - Renderer.js, line 88

### 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:
  - Renderer.js, line 124

##### 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:
  - Renderer.js, line 149

#### 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:
  - Renderer.js, line 107

##### 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:
  - Renderer.js, line 167