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

# CanvasRenderer

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

## Classes

### CanvasRenderer

#### Implements

#### Constructors

##### Constructor

```ts
new CanvasRenderer(
   selection, 
   dndHandler, 
   handlerConfiguration, 
   rubberbandHandler, 
   viewportHandler, 
   spotlightHandler, 
   hoverHandler, 
   snapLinesHandler, 
   canvasElementHandler, 
   interactiveZonesHandler, 
   isPreviewRenderer?): CanvasRenderer;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `selection` | [`ISelectionHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ISelectionHandler.md#iselectionhandler) | `undefined` |
| `dndHandler` | [`IDragNDropHandler`](#idragndrophandler) | `undefined` |
| `handlerConfiguration` | [`IHandlersConfiguration`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IHandlersConfiguration.md#ihandlersconfiguration) | `undefined` |
| `rubberbandHandler` | [`RubberbandHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/RubberbandHandler.md#rubberbandhandler) | `undefined` |
| `viewportHandler` | [`IViewportHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#iviewporthandler) | `undefined` |
| `spotlightHandler` | [`SpotlightHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/SpotlightHandler.md#spotlighthandler) | `undefined` |
| `hoverHandler` | [`IHoverHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IHoverHandler.md#ihoverhandler) | `undefined` |
| `snapLinesHandler` | [`ISnapLinesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ISnapLinesHandler.md#isnaplineshandler) | `undefined` |
| `canvasElementHandler` | [`ICanvasElementHandler`](#icanvaselementhandler) | `undefined` |
| `interactiveZonesHandler` | [`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler) | `undefined` |
| `isPreviewRenderer` | `boolean` | `false` |

###### Returns

[`CanvasRenderer`](#canvasrenderer)

#### Properties

##### getVariableDisplayName

```ts
getVariableDisplayName: (item) => string = null;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `any` |

###### Returns

`string`

##### previewMode

```ts
previewMode: boolean = false;
```

##### style

```ts
style: CanvasRendererStyle;
```

#### Accessors

##### conf

###### Set Signature

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

###### Parameters

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

###### Returns

`void`

##### textRenderer

###### Set Signature

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`TextRenderer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/TextRenderer.md#abstract-textrenderer) |

###### Returns

`void`

##### violationSrc

###### Get Signature

```ts
get violationSrc(): ViolationService;
```

###### Returns

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

###### Set Signature

```ts
set violationSrc(service): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `service` | [`ViolationService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViolationService-1.md#violationservice) |

###### Returns

`void`

#### Methods

##### applyContextScale()

```ts
applyContextScale(
   renderingContext, 
   workspace, 
   offset, 
   clipByWorkspace?, 
   dpi?): CanvasRenderingContext2D;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `renderingContext` | `CanvasRenderingContext2D` | `undefined` |
| `workspace` | [`IWorkspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspace.md#iworkspace) | `undefined` |
| `offset` | `PointF` | `undefined` |
| `clipByWorkspace` | `boolean` | `true` |
| `dpi?` | `number` | `undefined` |

###### Returns

`CanvasRenderingContext2D`

###### Implementation of

[`ICanvasRenderer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#icanvasrenderer).[`applyContextScale`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#applycontextscale)

##### clearTextCursor()

```ts
clearTextCursor(canvas): void;
```

###### Parameters

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

###### Returns

`void`

##### drawRubberband()

```ts
drawRubberband(
   context, 
   rubberband, 
   offset): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | `CanvasRenderingContext2D` |
| `rubberband` | [`Rubberband`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Rubberband.md#rubberband) |
| `offset` | `PointF` |

###### Returns

`void`

##### drawTextCursor()

```ts
drawTextCursor(
   canvas, 
   itemHandler, 
   callback, 
   workspace, 
   mul, 
   offset): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `canvas` | `HTMLCanvasElement` |
| `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) |
| `callback` | (`context`) => `void` |
| `workspace` | [`IWorkspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspace.md#iworkspace) |
| `mul` | `number` |
| `offset` | `PointF` |

###### Returns

`void`

##### drawWaitClock()

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

###### Parameters

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

###### Returns

`void`

###### Implementation of

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

##### redrawActiveCanvas()

```ts
redrawActiveCanvas(
   layers, 
   activeCanvas, 
   workspace, 
   productHandler, 
   offset): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `layers` | [`Layer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Layer.md#layer)[] |
| `activeCanvas` | `HTMLCanvasElement` |
| `workspace` | [`IWorkspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspace.md#iworkspace) |
| `productHandler` | [`IProductHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#iproducthandler) |
| `offset` | `PointF` |

###### Returns

`void`

##### redrawActiveTextCanvas()

```ts
redrawActiveTextCanvas(context, layers): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `context` | [`ITextEditorContext`](#itexteditorcontext) |
| `layers` | [`Layer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Layer.md#layer)[] |

###### Returns

`void`

##### redrawInactiveCanvas()

```ts
redrawInactiveCanvas(
   layers, 
   surfaceCanvas, 
   inactiveCanvas, 
   workspace, 
   margins, 
   mul, 
   productHandler, 
   offset, 
   mockupMarginWorkaroundEnabled?, 
   canvasBackground?, 
   dpi?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `layers` | [`Layer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Layer.md#layer)[] |
| `surfaceCanvas` | `HTMLCanvasElement` |
| `inactiveCanvas` | `HTMLCanvasElement` |
| `workspace` | [`IWorkspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspace.md#iworkspace) |
| `margins` | [`IMargins`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#imargins) |
| `mul` | `number` |
| `productHandler` | [`IProductHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#iproducthandler) |
| `offset` | `PointF` |
| `mockupMarginWorkaroundEnabled?` | `boolean` |
| `canvasBackground?` | `string` |
| `dpi?` | `number` |

###### Returns

`void`

###### Implementation of

[`ICanvasRenderer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#icanvasrenderer).[`redrawInactiveCanvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasRenderer.md#redrawinactivecanvas)

##### redrawSelectionCanvas()

```ts
redrawSelectionCanvas(
   designCanvas, 
   workspace, 
   style, 
   textContext, 
   viewer, 
   contentAngle, 
   offset, 
   layers, 
   messages, 
   drawShadow?, 
   drawSnapLines?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `designCanvas` | `HTMLCanvasElement` |
| `workspace` | [`IWorkspace`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspace.md#iworkspace) |
| `style` | [`CanvasRendererStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CanvasRendererStyle.md#canvasrendererstyle) |
| `textContext` | [`ITextLimitsContext`](#itextlimitscontext) & [`ITextEditorContext`](#itexteditorcontext) & [`ITranslationsContext`](#itranslationscontext) |
| `viewer` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) & [`IRulersContext`](#irulerscontext) |
| `contentAngle` | `number` |
| `offset` | `PointF` |
| `layers` | [`Layer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Layer.md#layer)[] |
| `messages` | [`IViewerMessagesConfig`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewerMessagesConfig.md#iviewermessagesconfig) |
| `drawShadow?` | `boolean` |
| `drawSnapLines?` | `boolean` |

###### Returns

`void`

##### setLoadingImageUrl()

```ts
setLoadingImageUrl(url): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `url` | `string` |

###### Returns

`void`

##### setTextWhizzModule()

```ts
setTextWhizzModule(textWhizz): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `textWhizz` | `any` |

###### Returns

`void`

## Interfaces

### ICanvasElementHandler

#### Properties

##### viewportMemoryCanvas

```ts
viewportMemoryCanvas: HTMLCanvasElement;
```

##### viewportTextureCanvas

```ts
viewportTextureCanvas: HTMLCanvasElement;
```

***

### IDragNDropHandler

#### Methods

##### draw()

```ts
draw(): void;
```

###### Returns

`void`

***

### IRulersContext

#### Properties

##### actualRulerWidth

```ts
actualRulerWidth: number;
```

***

### ITextEditorContext

#### Properties

##### textEditor

```ts
textEditor: ITextEditor;
```

***

### ITextLimitsContext

#### Properties

##### errorInput

```ts
errorInput: boolean;
```

##### lastLimitsEvent

```ts
lastLimitsEvent: ILimitsViolationEventData;
```

***

### ITranslationsContext

#### Properties

##### translations

```ts
translations: Translations;
```