# Class: Viewport

## Viewport(canvas)

#### new Viewport(canvas)

Viewport defines the user view into the content being rendered, similar to a camera it defines the size of the content, rotation and position of the content. The viewport can be moved, rotated and scaled to navigate the virtual canvas.

##### Parameters:

Name | Type | Description
--- | --- | ---
`canvas` | Element | Canvas DOM element where the viewport is being rendered.

Source:
  - Viewport.js, line 13

### Members

#### canvas :Element

Canvas DOM element where the viewport is being rendered.

##### Type:

- Element

Source:
  - Viewport.js, line 27

#### center :Vector2

Center point of the viewport. Relative to the size of the canvas. Rotation and zoom is applied relative to this point.

##### Type:

- Vector2

Source:
  - Viewport.js, line 43

#### centerOnPointer

Flag to indicate if the viewport should move when scaling. For some application its easier to focus the target if the viewport moves to the pointer location while scaling.

Source:
  - Viewport.js, line 89

#### inverseMatrix :Matrix

Inverse of the local transformation matrix. Used to transform points from local to global coordinates.

##### Type:

- Matrix

Source:
  - Viewport.js, line 73

#### matrix :Matrix

Local transformation matrix applied to the object.

##### Type:

- Matrix

Source:
  - Viewport.js, line 64

#### matrixNeedsUpdate :boolean

If true the matrix is updated before rendering the object. Disable this if you want to update the matrix manually.

##### Type:

- boolean

Source:
  - Viewport.js, line 82

#### position :Vector2

Position of the viewport.

##### Type:

- Vector2

Source:
  - Viewport.js, line 34

#### rotation :number

Rotation of the object relative to its center.

##### Type:

- number

Source:
  - Viewport.js, line 57

#### rotationPoint

Value of the initial point of rotation if the viewport is being rotated. Is set to null when the viewport is not being rotated.

Source:
  - Viewport.js, line 96

#### scale :number

Scale of the object.

##### Type:

- number

Source:
  - Viewport.js, line 50

#### uuid :string

UUID of the object.

##### Type:

- string

Source:
  - Viewport.js, line 20

### Methods

#### centerObject(object, canvas)

Center the viewport relative to a object. The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object. Uses the object's local transformation matrix and the canvas size to calculate the new position of the viewport.

##### Parameters:

Name | Type | Description
--- | --- | ---
`object` | Object2D | Object to be centered on the viewport.
`canvas` | Element | Canvas element where the image is drawn.

Source:
  - Viewport.js, line 145

#### updateMatrix()

Calculate and update the viewport transformation matrix. Also updates the inverse matrix of the viewport.

Source:
  - Viewport.js, line 104