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

# TextRenderer

> - [`Ctx2dTextRenderer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Ctx2dTextRenderer.md#ctx2dtextrenderer)
> - [`WebGLTextRenderer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/WebGLTextRenderer.md#webgltextrenderer)

## Classes

### `abstract` TextRenderer

#### Extended by

#### Constructors

##### Constructor

```ts
new TextRenderer(
   staticCanvas, 
   activeCanvas, 
   textWhizz, 
   zoom, 
   offset, 
   viewportHandler, 
   selectionStyle, 
   rgbColorParser, 
   canvasFactory): TextRenderer;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `staticCanvas` | `HTMLCanvasElement` |
| `activeCanvas` | `HTMLCanvasElement` |
| `textWhizz` | `any` |
| `zoom` | `number` |
| `offset` | `PointF` |
| `viewportHandler` | [`IViewportHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportHandler.md#iviewporthandler) |
| `selectionStyle` | [`ITextSelectionStyleConfig`](#itextselectionstyleconfig) |
| `rgbColorParser` | [`IRgbColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#irgbcolorparser) |
| `canvasFactory` | [`ICanvasFactory`](#icanvasfactory) |

###### Returns

[`TextRenderer`](#abstract-textrenderer)

#### Properties

##### staticCanvasMargin

```ts
static staticCanvasMargin: number = 10;
```

#### Accessors

##### offset

###### Get Signature

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

###### Returns

`PointF`

###### Set Signature

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

###### Parameters

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

###### Returns

`void`

#### Methods

##### clearText()

```ts
abstract clearText(): void;
```

###### Returns

`void`

##### drawSelection()

```ts
abstract drawSelection(
   handler, 
   selection, 
   transform, 
   center, 
   previewScale): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `TextHandler` |
| `selection` | `TextRange` |
| `transform` | `Transform` |
| `center` | `PointF` |
| `previewScale` | `number` |

###### Returns

`void`

##### drawText()

```ts
abstract drawText(
   handler, 
   transform, 
   center, 
   previewScale, 
   opacity, 
   clippingPath): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `TextHandler` |
| `transform` | `Transform` |
| `center` | `PointF` |
| `previewScale` | `number` |
| `opacity` | `number` |
| `clippingPath` | `Path` |

###### Returns

`void`

##### getTextImage()

```ts
abstract getTextImage(
   handler, 
   bounds, 
   previewScale): HTMLCanvasElement;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `TextHandler` |
| `bounds` | `RectangleF` |
| `previewScale` | `number` |

###### Returns

`HTMLCanvasElement`

##### setWorkspaceSize()

```ts
setWorkspaceSize(width, height): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `width` | `number` |
| `height` | `number` |

###### Returns

`void`

##### setZoom()

```ts
setZoom(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### transformText()

```ts
abstract transformText(
   handler, 
   transform, 
   center, 
   previewScale, 
   opacity, 
   clippingPath): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `TextHandler` |
| `transform` | `Transform` |
| `center` | `PointF` |
| `previewScale` | `number` |
| `opacity` | `number` |
| `clippingPath` | `Path` |

###### Returns

`void`

##### renderTextImage()

```ts
static renderTextImage(
   handler, 
   imageContainer, 
   imageContainerRect, 
   itemHandlerCtx, 
   opacityMultiplier, 
   increaseImageRect): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | \| [`NewBaseTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/NewBaseTextItemHandler.md#abstract-newbasetextitemhandler) \| [`BaseTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseTextItemHandler.md#abstract-basetextitemhandler) |
| `imageContainer` | [`ImageContainer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ImageContainer.md#imagecontainer) |
| `imageContainerRect` | `RectangleF` |
| `itemHandlerCtx` | `CanvasRenderingContext2D` |
| `opacityMultiplier` | `number` |
| `increaseImageRect` | `number` |

###### Returns

`void`

## Interfaces

### ICanvasFactory

#### Methods

##### createCanvas()

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `size` | [ISize](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ISize.md) |

###### Returns

`HTMLCanvasElement`

***

### ITextSelectionStyleConfig

#### Properties

##### color

```ts
color: string;
```

##### textColor

```ts
textColor: string;
```