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

# ProductPreviewRenderer

> [`ProductPreviewRenderer`](#productpreviewrenderer)

## Classes

### ProductPreviewRenderer

#### Constructors

##### Constructor

```ts
new ProductPreviewRenderer(
   product, 
   previewContainersSourceFactory, 
   designAtomsApiClient, 
   colorPreviewService, 
   service, 
   viewerConfigurationContext, 
   colorParser): ProductPreviewRenderer;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `product` | `Product` |
| `previewContainersSourceFactory` | [`IPreviewContainersSourceFactory`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewContainersSource.md#ipreviewcontainerssourcefactory) |
| `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`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PreviewCanvas.md#iviewerconfigurationcontext) |
| `colorParser` | [`IColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#icolorparser) |

###### Returns

#### Methods

##### dispose()

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

###### Returns

`void`

##### render()

```ts
render(
   canvas, 
   surfaceIndex, 
   containersFilter?, 
   previewSize?, 
   previewOffset?, 
   dpi?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `canvas` | `HTMLCanvasElement` |
| `surfaceIndex` | `number` |
| `containersFilter?` | (`container`) => `boolean` |
| `previewSize?` | [ISize](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ISize.md) |
| `previewOffset?` | [IPoint](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IPoint.md) |
| `dpi?` | `number` |

###### Returns

`void`

##### waitUpdateAndExecute()

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

###### Parameters

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

###### Returns

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