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

# PreviewCanvas

> - [`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas)
> - [`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource)

## Classes

### PreviewCanvas

#### Implements

#### Constructors

##### Constructor

```ts
new PreviewCanvas(
   sourceSurface, 
   previewContainersSourceFactory, 
   zoom, 
   mul, 
   renderer, 
   designAtomsApiClient, 
   colorPreviewService, 
   service, 
   viewerConfigurationContext, 
   colorParser): PreviewCanvas;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `sourceSurface` | `Surface` |
| `previewContainersSourceFactory` | [`IPreviewContainersSourceFactory`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewContainersSource.md#ipreviewcontainerssourcefactory) |
| `zoom` | `number` |
| `mul` | `number` |
| `renderer` | [`IWaitClockRenderer`](#iwaitclockrenderer) |
| `designAtomsApiClient` | [`IDesignAtomsApiClient`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IDesignAtomsApiClient.md#idesignatomsapiclient) |
| `colorPreviewService` | [`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice) |
| `service` | [`Service`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Service.md#service) |
| `viewerConfigurationContext` | [`IViewerConfigurationContext`](#iviewerconfigurationcontext) |
| `colorParser` | [`IColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#icolorparser) |

###### Returns

[`PreviewCanvas`](#previewcanvas)

#### Properties

##### dpiOverride

```ts
dpiOverride: number = null;
```

#### Accessors

##### badViolationIconCssClass

###### Get Signature

```ts
get badViolationIconCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`badViolationIconCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#badviolationiconcssclass)

##### bigButtonGroupCssClass

###### Get Signature

```ts
get bigButtonGroupCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`bigButtonGroupCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#bigbuttongroupcssclass)

##### canvasElementSize

###### Get Signature

```ts
get canvasElementSize(): object;
```

###### Returns

`object`

###### height?

```ts
optional height?: number;
```

###### width?

```ts
optional width?: number;
```

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`canvasElementSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#canvaselementsize)

##### cmykColorProfileFileId

###### Get Signature

```ts
get cmykColorProfileFileId(): string;
```

###### Returns

`string`

##### contentAngle

###### Get Signature

```ts
get contentAngle(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`contentAngle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#contentangle)

##### currentItemHandler

###### Get Signature

```ts
get currentItemHandler(): ItemHandler;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`currentItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#currentitemhandler)

##### designAtomsApiClient

###### Get Signature

```ts
get designAtomsApiClient(): IDesignAtomsApiClient;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`designAtomsApiClient`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#designatomsapiclient)

##### disableSmoothing

###### Get Signature

```ts
get disableSmoothing(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`disableSmoothing`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#disablesmoothing)

##### doneButtonCssClass

###### Get Signature

```ts
get doneButtonCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`doneButtonCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#donebuttoncssclass)

##### fontRegistry

###### Get Signature

```ts
get fontRegistry(): FontRegistry;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`fontRegistry`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#fontregistry)

##### frontEndTextRenderingEnabled

###### Get Signature

```ts
get frontEndTextRenderingEnabled(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`frontEndTextRenderingEnabled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#frontendtextrenderingenabled)

##### goodViolationIconCssClass

###### Get Signature

```ts
get goodViolationIconCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`goodViolationIconCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#goodviolationiconcssclass)

##### grayscaleColorProfileFileId

###### Get Signature

```ts
get grayscaleColorProfileFileId(): string;
```

###### Returns

`string`

##### handleButtonCssClass

###### Get Signature

```ts
get handleButtonCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`handleButtonCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#handlebuttoncssclass)

##### height

###### Get Signature

```ts
get height(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`height`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#height)

##### history

###### Get Signature

```ts
get history(): History;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`history`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#history)

##### hitTestManager

###### Get Signature

```ts
get hitTestManager(): IHitTestManager;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`hitTestManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#hittestmanager)

##### hoverHandler

###### Get Signature

```ts
get hoverHandler(): IHoverHandler;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`hoverHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#hoverhandler)

##### ignorePermissionsMode

###### Get Signature

```ts
get ignorePermissionsMode(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`ignorePermissionsMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#ignorepermissionsmode)

##### initialization

###### Get Signature

```ts
get initialization(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`initialization`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#initialization)

##### isInitialized

###### Get Signature

```ts
get isInitialized(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isInitialized`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isinitialized)

##### isSelectionDragging

###### Get Signature

```ts
get isSelectionDragging(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isSelectionDragging`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isselectiondragging)

##### isSelectionIdle

###### Get Signature

```ts
get isSelectionIdle(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isSelectionIdle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isselectionidle)

##### isSelectionLocked

###### Get Signature

```ts
get isSelectionLocked(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isSelectionLocked`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isselectionlocked)

##### isSelectionResizing

###### Get Signature

```ts
get isSelectionResizing(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isSelectionResizing`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isselectionresizing)

##### isSelectionRotating

###### Get Signature

```ts
get isSelectionRotating(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isSelectionRotating`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isselectionrotating)

##### layers

###### Get Signature

```ts
get layers(): LayerCollection;
```

###### Returns

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

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`layers`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#layers)

##### maxFontSize

###### Get Signature

```ts
get maxFontSize(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`maxFontSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#maxfontsize)

##### maxLeading

###### Get Signature

```ts
get maxLeading(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`maxLeading`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#maxleading)

##### minFontSize

###### Get Signature

```ts
get minFontSize(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`minFontSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#minfontsize)

##### minLeading

###### Get Signature

```ts
get minLeading(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`minLeading`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#minleading)

##### mouseMoveTimeout

###### Get Signature

```ts
get mouseMoveTimeout(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`mouseMoveTimeout`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#mousemovetimeout)

##### mul

###### Get Signature

```ts
get mul(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`mul`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#mul)

##### multipleSelectionEnabled

###### Get Signature

```ts
get multipleSelectionEnabled(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`multipleSelectionEnabled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#multipleselectionenabled)

##### offset

###### Get Signature

```ts
get offset(): PointF;
```

###### Returns

`PointF`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`offset`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#offset)

##### placeholderButtonGroupCssClass

###### Get Signature

```ts
get placeholderButtonGroupCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`placeholderButtonGroupCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#placeholderbuttongroupcssclass)

##### previewMode

###### Get Signature

```ts
get previewMode(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`previewMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#previewmode)

##### qualityBadToGoodChangeScaleBarCssClass

###### Get Signature

```ts
get qualityBadToGoodChangeScaleBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityBadToGoodChangeScaleBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitybadtogoodchangescalebarcssclass)

##### qualityBadToWarningChangeScaleBarCssClass

###### Get Signature

```ts
get qualityBadToWarningChangeScaleBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityBadToWarningChangeScaleBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitybadtowarningchangescalebarcssclass)

##### qualityChangeContainerCssClass

###### Get Signature

```ts
get qualityChangeContainerCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityChangeContainerCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitychangecontainercssclass)

##### qualityChangeInfoBarCssClass

###### Get Signature

```ts
get qualityChangeInfoBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityChangeInfoBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitychangeinfobarcssclass)

##### qualityChangeScaleBarCssClass

###### Get Signature

```ts
get qualityChangeScaleBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityChangeScaleBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitychangescalebarcssclass)

##### qualityNoAnimationChangeScaleBarCssClass

###### Get Signature

```ts
get qualityNoAnimationChangeScaleBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityNoAnimationChangeScaleBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitynoanimationchangescalebarcssclass)

##### qualityWarningToGoodChangeScaleBarCssClass

###### Get Signature

```ts
get qualityWarningToGoodChangeScaleBarCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`qualityWarningToGoodChangeScaleBarCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#qualitywarningtogoodchangescalebarcssclass)

##### renderingConfig

###### Get Signature

```ts
get renderingConfig(): IRenderingConfig;
```

###### Returns

[IRenderingConfig](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IRenderingConfig.md)

##### renderingConfigProvider

###### Get Signature

```ts
get renderingConfigProvider(): IRenderingConfigProvider;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`renderingConfigProvider`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#renderingconfigprovider)

##### resizeGripColor

###### Get Signature

```ts
get resizeGripColor(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`resizeGripColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#resizegripcolor)

##### resizeGripLineColor

###### Get Signature

```ts
get resizeGripLineColor(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`resizeGripLineColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#resizegriplinecolor)

##### resizeGripSize

###### Get Signature

```ts
get resizeGripSize(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`resizeGripSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#resizegripsize)

##### rgbColorProfileFileId

###### Get Signature

```ts
get rgbColorProfileFileId(): string;
```

###### Returns

`string`

##### rotationGripColor

###### Get Signature

```ts
get rotationGripColor(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`rotationGripColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#rotationgripcolor)

##### rotationGripLineColor

###### Get Signature

```ts
get rotationGripLineColor(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`rotationGripLineColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#rotationgriplinecolor)

##### rotationGripLineLength

###### Get Signature

```ts
get rotationGripLineLength(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`rotationGripLineLength`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#rotationgriplinelength)

##### rotationGripSize

###### Get Signature

```ts
get rotationGripSize(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`rotationGripSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#rotationgripsize)

##### selectionColor

###### Get Signature

```ts
get selectionColor(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`selectionColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#selectioncolor)

##### selectionWidth

###### Get Signature

```ts
get selectionWidth(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`selectionWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#selectionwidth)

##### service

###### Get Signature

```ts
get service(): Service;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`service`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#service)

##### sourceSurface

###### Get Signature

```ts
get sourceSurface(): Surface;
```

###### Returns

`Surface`

##### style

###### Get Signature

```ts
get style(): CanvasRendererStyle;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`style`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#style)

##### tags

###### Get Signature

```ts
get tags(): Object;
```

###### Returns

`Object`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`tags`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#tags)

##### targetDpi

###### Get Signature

```ts
get targetDpi(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`targetDpi`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#targetdpi)

##### textEditor

###### Get Signature

```ts
get textEditor(): ITextEditor;
```

###### Returns

[ITextEditor](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ITextEditor.md)

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`textEditor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#texteditor)

##### textWhizz

###### Get Signature

```ts
get textWhizz(): any;
```

###### Returns

`any`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`textWhizz`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#textwhizz)

##### translations

###### Get Signature

```ts
get translations(): Translations;
```

###### Returns

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

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`translations`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#translations)

##### viewerConfiguration

###### Get Signature

```ts
get viewerConfiguration(): IViewerConfiguration;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`viewerConfiguration`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#viewerconfiguration)

##### violationContainerCssClass

###### Get Signature

```ts
get violationContainerCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`violationContainerCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#violationcontainercssclass)

##### violationWarningButtonCssClass

###### Get Signature

```ts
get violationWarningButtonCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`violationWarningButtonCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#violationwarningbuttoncssclass)

##### warningViolationIconCssClass

###### Get Signature

```ts
get warningViolationIconCssClass(): string;
```

###### Returns

`string`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`warningViolationIconCssClass`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#warningviolationiconcssclass)

##### width

###### Get Signature

```ts
get width(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#width)

##### workspace

###### Get Signature

```ts
get workspace(): IWorkspace;
```

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`workspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#workspace)

##### workspaceHeight

###### Get Signature

```ts
get workspaceHeight(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`workspaceHeight`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#workspaceheight)

##### workspaceWidth

###### Get Signature

```ts
get workspaceWidth(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`workspaceWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#workspacewidth)

##### zoom

###### Get Signature

```ts
get zoom(): number;
```

###### Returns

`number`

###### Implementation of

[`ICanvasDataSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#icanvasdatasource).[`zoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasDataSource.md#zoom)

#### Methods

##### addPlaceholderButtonGroup()

```ts
addPlaceholderButtonGroup(placeholder): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`addPlaceholderButtonGroup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#addplaceholderbuttongroup)

##### addSelectedItemHandler()

```ts
addSelectedItemHandler(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`addSelectedItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#addselecteditemhandler)

##### addViolationContainer()

```ts
addViolationContainer(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`addViolationContainer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#addviolationcontainer)

##### clearSelectedItemHandlers()

```ts
clearSelectedItemHandlers(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`clearSelectedItemHandlers`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#clearselecteditemhandlers)

##### continueRedraw()

```ts
continueRedraw(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`continueRedraw`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#continueredraw)

##### deleteItemHandler()

```ts
deleteItemHandler(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`deleteItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#deleteitemhandler)

##### disableSelection()

```ts
disableSelection(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`disableSelection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#disableselection)

##### dispose()

```ts
dispose(): void;
```

###### Returns

`void`

##### doesContainItem()

```ts
doesContainItem(item): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `Item` |

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`doesContainItem`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#doescontainitem)

##### drawWaitClock()

```ts
drawWaitClock(context, center): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `CanvasRenderingContext2D` |
| `center` | `PointF` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`drawWaitClock`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#drawwaitclock)

##### enableSelection()

```ts
enableSelection(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`enableSelection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#enableselection)

##### ensureFocus()

```ts
ensureFocus(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`ensureFocus`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#ensurefocus)

##### getAllItemHandlers()

```ts
getAllItemHandlers(options?): ItemHandler[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `options?` | [`GetItemHandlersOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#getitemhandlersoptions) |

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`getAllItemHandlers`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#getallitemhandlers)

##### getButtonGroupRectInGripsDiv()

```ts
getButtonGroupRectInGripsDiv(div, ignoreRotate?): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `div` | `HTMLElement` |
| `ignoreRotate?` | `boolean` |

###### Returns

`RectangleF`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`getButtonGroupRectInGripsDiv`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#getbuttongrouprectingripsdiv)

##### getData()

```ts
getData(forService?, layerId?): CanvasData;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `forService?` | `boolean` |
| `layerId?` | `string` |

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`getData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#getdata)

##### getItemHandler()

```ts
getItemHandler<THandler>(item): THandler;
```

###### Type Parameters

| Type Parameter |
| ------ |
| `THandler` *extends* [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `Item` |

###### Returns

`THandler`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`getItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#getitemhandler)

##### isDragSource()

```ts
isDragSource(itemHandler): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isDragSource`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isdragsource)

##### isDragTarget()

```ts
isDragTarget(itemHandler): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isDragTarget`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isdragtarget)

##### isItemHandlerSelected()

```ts
isItemHandlerSelected(itemHandler): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isItemHandlerSelected`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isitemhandlerselected)

##### isOnlyThisItemHandlerSelected()

```ts
isOnlyThisItemHandlerSelected(itemHandler): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |

###### Returns

`boolean`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`isOnlyThisItemHandlerSelected`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#isonlythisitemhandlerselected)

##### onLayerTextureLoaded()

```ts
onLayerTextureLoaded(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`onLayerTextureLoaded`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#onlayertextureloaded)

##### onScroll()

```ts
onScroll(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`onScroll`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#onscroll)

##### onScroll()

```ts
onScroll(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`onScroll`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#onscroll-1)

##### onSelectionLocked()

```ts
onSelectionLocked(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`onSelectionLocked`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#onselectionlocked)

##### onSelectionLocked()

```ts
onSelectionLocked(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`onSelectionLocked`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#onselectionlocked-1)

##### pauseRedraw()

```ts
pauseRedraw(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`pauseRedraw`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#pauseredraw)

##### pauseUpdateTexts()

```ts
pauseUpdateTexts(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`pauseUpdateTexts`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#pauseupdatetexts)

##### redraw()

```ts
redraw(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`redraw`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#redraw)

##### redrawActiveTexts()

```ts
redrawActiveTexts(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`redrawActiveTexts`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#redrawactivetexts)

##### redrawDesign()

```ts
redrawDesign(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`redrawDesign`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#redrawdesign)

##### removePlaceholderButtonGroup()

```ts
removePlaceholderButtonGroup(placeholder): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`removePlaceholderButtonGroup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#removeplaceholderbuttongroup)

##### removeSelectedItemHandler()

```ts
removeSelectedItemHandler(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`removeSelectedItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#removeselecteditemhandler)

##### removeViolationContainer()

```ts
removeViolationContainer(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`removeViolationContainer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#removeviolationcontainer)

##### resumeUpdateTexts()

```ts
resumeUpdateTexts(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`resumeUpdateTexts`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#resumeupdatetexts)

##### selectedItemHandlerChanged()

```ts
selectedItemHandlerChanged(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`selectedItemHandlerChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#selecteditemhandlerchanged)

##### selectedItemHandlerChanged()

```ts
selectedItemHandlerChanged(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`selectedItemHandlerChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#selecteditemhandlerchanged-1)

##### setCursor()

```ts
setCursor(value, onBody): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `any` |
| `onBody` | `boolean` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`setCursor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#setcursor)

##### setSelectedItemHandlers()

```ts
setSelectedItemHandlers(itemHandlers): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandlers` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)[] |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`setSelectedItemHandlers`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#setselecteditemhandlers)

##### subscribeLimitsMessage()

```ts
subscribeLimitsMessage(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`subscribeLimitsMessage`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#subscribelimitsmessage)

##### unsubscribeLimitsMessage()

```ts
unsubscribeLimitsMessage(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`unsubscribeLimitsMessage`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#unsubscribelimitsmessage)

##### updateButtonGroups()

```ts
updateButtonGroups(options): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`UpdateButtonGroupsOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/UpdateButtonGroupsOptions.md#updatebuttongroupsoptions) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateButtonGroups`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updatebuttongroups)

##### updatePlaceholderButtonGroup()

```ts
updatePlaceholderButtonGroup(placeholder): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `placeholder` | \| [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) \| [`GroupItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/GroupItemHandler.md#groupitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updatePlaceholderButtonGroup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateplaceholderbuttongroup)

##### updatePlaceholderButtonGroupPosition()

```ts
updatePlaceholderButtonGroupPosition(placeholder): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updatePlaceholderButtonGroupPosition`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateplaceholderbuttongroupposition)

##### updatePlaceholderButtonGroups()

```ts
updatePlaceholderButtonGroups(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updatePlaceholderButtonGroups`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateplaceholderbuttongroups)

##### updateSelection()

```ts
updateSelection(force?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `force?` | `boolean` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateSelection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateselection)

##### updateTexts()

```ts
updateTexts(): void;
```

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateTexts`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updatetexts)

##### updateViolationContainer()

```ts
updateViolationContainer(itemHandler, updatePosition?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |
| `updatePosition?` | `boolean` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateViolationContainer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateviolationcontainer)

##### updateViolationContainerPosition()

```ts
updateViolationContainerPosition(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateViolationContainerPosition`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateviolationcontainerposition)

##### updateViolationContainers()

```ts
updateViolationContainers(updatePosition?, onlyVisible?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `updatePosition?` | `boolean` |
| `onlyVisible?` | `boolean` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`updateViolationContainers`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#updateviolationcontainers)

##### violationWarningButtonHitTestObject()

```ts
violationWarningButtonHitTestObject(pt): BaseRectangleItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `pt` | `PointF` |

###### Returns

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

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`violationWarningButtonHitTestObject`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#violationwarningbuttonhittestobject)

##### waitFontRegistryInitialized()

```ts
waitFontRegistryInitialized(): Promise<void>;
```

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`\>

##### waitUpdate()

```ts
waitUpdate(itemHandlers?): Promise<void[]>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandlers?` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)[] |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`[]\>

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`waitUpdate`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#waitupdate)

##### waitUpdateAndExecute()

```ts
waitUpdateAndExecute(callback): Promise<void>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback` | () => `void` |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`\>

##### zoomChanged()

```ts
zoomChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`zoomChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#zoomchanged)

##### zoomChanged()

```ts
zoomChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | `any` |

###### Returns

`void`

###### Implementation of

[`ICanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#icanvas).[`zoomChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas.md#zoomchanged-1)

## Interfaces

### IViewerConfigurationContext

#### Properties

##### configuration

```ts
configuration: IViewerConfiguration;
```

***

### IWaitClockRenderer

#### Methods

##### drawWaitClock()

```ts
drawWaitClock(
   context, 
   center, 
   mul): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `CanvasRenderingContext2D` |
| `center` | `PointF` |
| `mul` | `number` |

###### Returns

`void`