---
title: "ViewportHandler | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViewportHandler/"
---

# ViewportHandler

> - [`IViewportHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#iviewporthandler)

## Classes

### ViewportHandler

#### Implements

#### Constructors

##### Constructor

```ts
new ViewportHandler(canvas, viewer): ViewportHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `canvas` | [`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas) |
| `viewer` | [`IViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#iviewer) |

###### Returns

[`ViewportHandler`](#viewporthandler)

#### Methods

##### applyViewportTransformTo2dContext()

```ts
applyViewportTransformTo2dContext(context, canvas): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `CanvasRenderingContext2D` |
| `canvas` | `HTMLCanvasElement` |

###### Returns

`void`

###### Implementation of

[`IViewportHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#iviewporthandler).[`applyViewportTransformTo2dContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#applyviewporttransformto2dcontext)

##### applyViewportTransformToTwMatrix()

```ts
applyViewportTransformToTwMatrix(matrix, canvas): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `matrix` | `Matrix` |
| `canvas` | `HTMLCanvasElement` |

###### Returns

`void`

###### Implementation of

[`IViewportHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#iviewporthandler).[`applyViewportTransformToTwMatrix`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#applyviewporttransformtotwmatrix)

##### getDesignSize()

```ts
getDesignSize(): SizeF;
```

###### Returns

`SizeF`

##### getDesignTranslate()

```ts
getDesignTranslate(canvas): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `canvas` | `HTMLCanvasElement` |

###### Returns

`any`

##### getScrollTranslate()

```ts
getScrollTranslate(): any;
```

###### Returns

`any`

##### getViewportRotateAngle()

```ts
getViewportRotateAngle(): number;
```

###### Returns

`number`