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

# CanvasElementHandler

> - [`ITextEditorElementHandler`](#itexteditorelementhandler)
> - [`IActiveTextCanvasHandler`](#iactivetextcanvashandler)

## Classes

### CanvasElementHandler

#### Implements

#### Constructors

##### Constructor

```ts
new CanvasElementHandler(
   viewer, 
   selection, 
   dndHandler, 
   rotateHandler, 
   config): CanvasElementHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `viewer` | [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) |
| `selection` | [`SelectionHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/SelectionHandler.md#selectionhandler) |
| `dndHandler` | [`DragNDropHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/DragNDropHandler.md#dragndrophandler) |
| `rotateHandler` | [`RotateHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/RotateHandler.md#rotatehandler) |
| `config` | [`ICanvasElementHandlerConfiguration`](#icanvaselementhandlerconfiguration) |

###### Returns

[`CanvasElementHandler`](#canvaselementhandler)

#### Properties

##### staticTextCanvas

```ts
staticTextCanvas: HTMLCanvasElement = null;
```

#### Accessors

##### offset

###### Get Signature

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

###### Returns

`PointF`

###### Set Signature

```ts
set offset(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `PointF` |

###### Returns

`void`

##### textEditorDiv

###### Get Signature

```ts
get textEditorDiv(): HTMLElement;
```

###### Returns

`HTMLElement`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`textEditorDiv`](#texteditordiv-1)

##### textEditorInnerDiv

###### Get Signature

```ts
get textEditorInnerDiv(): HTMLElement;
```

###### Returns

`HTMLElement`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`textEditorInnerDiv`](#texteditorinnerdiv-1)

##### viewportActiveCanvas

###### Get Signature

```ts
get viewportActiveCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportActiveTextCanvas

###### Get Signature

```ts
get viewportActiveTextCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportCursorCanvas

###### Get Signature

```ts
get viewportCursorCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportDesignCanvas

###### Get Signature

```ts
get viewportDesignCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportInactiveCanvas

###### Get Signature

```ts
get viewportInactiveCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportMemoryCanvas

###### Get Signature

```ts
get viewportMemoryCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportSelectionCanvas

###### Get Signature

```ts
get viewportSelectionCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportSurfaceCanvas

###### Get Signature

```ts
get viewportSurfaceCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### viewportTextureCanvas

###### Get Signature

```ts
get viewportTextureCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

#### Methods

##### addChild()

```ts
addChild(element): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `element` | `HTMLElement` |

###### Returns

`void`

##### addElement()

```ts
addElement(
   parent, 
   whitespace, 
   width, 
   height): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `parent` | `HTMLElement` |
| `whitespace` | `HTMLElement` |
| `width` | `number` |
| `height` | `number` |

###### Returns

`void`

##### addPlaceholderButtonGroup()

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

###### Parameters

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

###### Returns

`void`

##### addStyles()

```ts
addStyles(): void;
```

###### Returns

`void`

##### addTextEditorStyles()

```ts
addTextEditorStyles(css): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `css` | `string` |

###### Returns

`void`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`addTextEditorStyles`](#addtexteditorstyles-1)

##### addViewport()

```ts
addViewport(viewport): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `viewport` | `HTMLDivElement` |

###### Returns

`void`

##### addViolationContainer()

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

###### Parameters

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

###### Returns

`void`

##### calculateRenderStateForItemHandlers()

```ts
calculateRenderStateForItemHandlers(layers): boolean;
```

###### Parameters

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

###### Returns

`boolean`

##### changeTextEditorDivOutlineColor()

```ts
changeTextEditorDivOutlineColor(toRed): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `toRed` | `boolean` |

###### Returns

`void`

##### createCanvas()

```ts
createCanvas(size): HTMLCanvasElement;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `size` | `SizeF` |

###### Returns

`HTMLCanvasElement`

##### getTextEditorFormattedText()

```ts
getTextEditorFormattedText(): string;
```

###### Returns

`string`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`getTextEditorFormattedText`](#gettexteditorformattedtext-1)

##### hideDnd()

```ts
hideDnd(): void;
```

###### Returns

`void`

##### hideTextEditor()

```ts
hideTextEditor(): void;
```

###### Returns

`void`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`hideTextEditor`](#hidetexteditor-1)

##### moveActiveTextCanvasBack()

```ts
moveActiveTextCanvasBack(): void;
```

###### Returns

`void`

###### Implementation of

[`IActiveTextCanvasHandler`](#iactivetextcanvashandler).[`moveActiveTextCanvasBack`](#moveactivetextcanvasback-1)

##### moveActiveTextCanvasOnTop()

```ts
moveActiveTextCanvasOnTop(): void;
```

###### Returns

`void`

###### Implementation of

[`IActiveTextCanvasHandler`](#iactivetextcanvashandler).[`moveActiveTextCanvasOnTop`](#moveactivetextcanvasontop-1)

##### removeChilds()

```ts
removeChilds(element): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `element` | `HTMLElement` |

###### Returns

`void`

##### removeElement()

```ts
removeElement(): void;
```

###### Returns

`void`

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

##### removeViewport()

```ts
removeViewport(): void;
```

###### Returns

`void`

##### removeViolationContainer()

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

###### Parameters

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

###### Returns

`void`

##### replaceStaticTextCanvas()

```ts
replaceStaticTextCanvas(): HTMLCanvasElement;
```

###### Returns

`HTMLCanvasElement`

##### setConf()

```ts
setConf(conf): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `conf` | [`ICanvasElementHandlerConfiguration`](#icanvaselementhandlerconfiguration) |

###### Returns

`void`

##### showDnd()

```ts
showDnd(
   point, 
   image, 
   angle): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `image` | `HTMLImageElement` |
| `angle` | `number` |

###### Returns

`void`

##### showTextEditor()

```ts
showTextEditor(
   rectangle, 
   textAlignment, 
   html, 
   borderWidth, 
   borderColor, 
   fillColor, 
   opacity, 
   textVerticalAlignment, 
   isVertical): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | `RotatedRectangleF` |
| `textAlignment` | `TextAlignment` |
| `html` | `string` |
| `borderWidth` | `number` |
| `borderColor` | `string` |
| `fillColor` | `string` |
| `opacity` | `number` |
| `textVerticalAlignment` | `TextVerticalAlignment` |
| `isVertical` | `boolean` |

###### Returns

`void`

###### Implementation of

[`ITextEditorElementHandler`](#itexteditorelementhandler).[`showTextEditor`](#showtexteditor-1)

##### updatePlaceholderButtonGroup()

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

###### Parameters

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

###### Returns

`void`

##### updatePlaceholderButtonGroupPosition()

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

###### Parameters

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

###### Returns

`void`

##### updateViewport()

```ts
updateViewport(): void;
```

###### Returns

`void`

##### updateViolationContainer()

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

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | `undefined` |
| `updatePosition` | `boolean` | `false` |
| `viewer` | [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) | `undefined` |

###### Returns

`void`

##### updateViolationContainerPosition()

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

###### Parameters

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

###### Returns

`void`

##### getControlRectangle()

```ts
static getControlRectangle(rectangle, viewer): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | `RotatedRectangleF` |
| `viewer` | [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) |

###### Returns

`any`

##### hideElement()

```ts
static hideElement(element, withoutAnimation?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `element` | `HTMLElement` | `undefined` |
| `withoutAnimation` | `boolean` | `false` |

###### Returns

`void`

##### rotateRectangle()

```ts
static rotateRectangle(rectangle, viewer): RotatedRectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | `RotatedRectangleF` |
| `viewer` | [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) |

###### Returns

`RotatedRectangleF`

##### setElementSize()

```ts
static setElementSize(
   element, 
   width, 
   height, 
   fullUpdate?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `element` | `HTMLCanvasElement` | `undefined` |
| `width` | `number` | `undefined` |
| `height` | `number` | `undefined` |
| `fullUpdate` | `boolean` | `true` |

###### Returns

`void`

##### showElement()

```ts
static showElement(element, withoutAnimation?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `element` | `HTMLElement` | `undefined` |
| `withoutAnimation` | `boolean` | `false` |

###### Returns

`void`

## Interfaces

### IActiveTextCanvasHandler

#### Methods

##### moveActiveTextCanvasBack()

```ts
moveActiveTextCanvasBack(): void;
```

###### Returns

`void`

##### moveActiveTextCanvasOnTop()

```ts
moveActiveTextCanvasOnTop(): void;
```

###### Returns

`void`

***

### ICanvasElementHandlerConfiguration

#### Properties

##### handleButtonEnabled

```ts
handleButtonEnabled: boolean;
```

***

### ITextEditorElementHandler

#### Properties

##### textEditorDiv

```ts
textEditorDiv: HTMLElement;
```

##### textEditorInnerDiv

```ts
textEditorInnerDiv: HTMLElement;
```

#### Methods

##### addTextEditorStyles()

```ts
addTextEditorStyles(css): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `css` | `string` |

###### Returns

`void`

##### getTextEditorFormattedText()

```ts
getTextEditorFormattedText(): string;
```

###### Returns

`string`

##### hideTextEditor()

```ts
hideTextEditor(): void;
```

###### Returns

`void`

##### showTextEditor()

```ts
showTextEditor(
   rectangle, 
   textAlignment, 
   html, 
   borderWidth, 
   borderColor, 
   fillColor, 
   opacity, 
   verticalAlignment, 
   isVertical): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | `RotatedRectangleF` |
| `textAlignment` | `TextAlignment` |
| `html` | `string` |
| `borderWidth` | `number` |
| `borderColor` | `string` |
| `fillColor` | `string` |
| `opacity` | `number` |
| `verticalAlignment` | `TextVerticalAlignment` |
| `isVertical` | `boolean` |

###### Returns

`void`