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

# Ctx2dTextRenderer

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

## Classes

### Ctx2dTextRenderer

#### Extends

#### Constructors

##### Constructor

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

###### 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`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/TextRenderer.md#itextselectionstyleconfig) |
| `rgbColorParser` | [`IRgbColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#irgbcolorparser) |
| `canvasFactory` | [`ICanvasFactory`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/TextRenderer.md#icanvasfactory) |

###### Returns

[`Ctx2dTextRenderer`](#ctx2dtextrenderer)

###### Inherited from

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

#### Properties

##### staticCanvasMargin

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

###### Inherited from

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

#### Accessors

##### offset

###### Get Signature

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

###### Returns

`PointF`

###### Set Signature

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

###### Parameters

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

###### Returns

`void`

###### Inherited from

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

#### Methods

##### clearText()

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

###### Returns

`void`

###### Overrides

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

##### drawSelection()

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

###### Parameters

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

###### Returns

`void`

###### Overrides

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

##### drawText()

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

###### Overrides

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

##### getTextImage()

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

###### Parameters

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

###### Returns

`HTMLCanvasElement`

###### Overrides

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

##### setWorkspaceSize()

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

###### Parameters

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

###### Returns

`void`

###### Inherited from

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

##### setZoom()

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

###### Parameters

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

###### Returns

`void`

###### Inherited from

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

##### transformText()

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

###### Overrides

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

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

###### Inherited from

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