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

# CanvasStyle

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

## Classes

### ArtworkSizeStyle

#### Implements

#### Constructors

##### Constructor

```ts
new ArtworkSizeStyle(data?): ArtworkSizeStyle;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `data?` | [`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle) |

###### Returns

[`ArtworkSizeStyle`](#artworksizestyle)

#### Properties

##### artworkFrameColor

```ts
artworkFrameColor: string;
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`artworkFrameColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworkframecolor)

##### artworkFrameShowLabel

```ts
artworkFrameShowLabel: boolean;
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`artworkFrameShowLabel`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworkframeshowlabel)

##### artworkFrameTextFont

```ts
artworkFrameTextFont: string;
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`artworkFrameTextFont`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworkframetextfont)

##### artworkFrameTextFontSize

```ts
artworkFrameTextFontSize: number;
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`artworkFrameTextFontSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworkframetextfontsize)

##### artworkInnerBorderFrameDash

```ts
artworkInnerBorderFrameDash: number[];
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`artworkInnerBorderFrameDash`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworkinnerborderframedash)

##### oversizeFrameColor

```ts
oversizeFrameColor: string;
```

###### Implementation of

[`IArtworkSizeStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iartworksizestyle).[`oversizeFrameColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#oversizeframecolor)

***

### CanvasStyle

#### Implements

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

#### Constructors

##### Constructor

```ts
new CanvasStyle(): CanvasStyle;
```

###### Returns

[`CanvasStyle`](#canvasstyle)

#### Properties

##### artworkSize

```ts
artworkSize: ArtworkSizeStyle;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`artworkSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#artworksize)

##### hover

```ts
hover: HoverStyle;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`hover`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#hover)

##### interactiveZones

```ts
interactiveZones: IInteractiveZonesStyles;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`interactiveZones`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#interactivezones)

##### rubberband

```ts
rubberband: RubberbandStyle;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`rubberband`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#rubberband)

##### selection

```ts
selection: SelectionStyleConfig;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`selection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#selection)

##### spotlight

```ts
spotlight: SpotlightStyle;
```

###### Implementation of

[`ICanvasStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#icanvasstyle).[`spotlight`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#spotlight)

***

### HoverStyle

#### Implements

- [`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle)

#### Constructors

##### Constructor

```ts
new HoverStyle(): HoverStyle;
```

###### Returns

[`HoverStyle`](#hoverstyle)

#### Properties

##### color

```ts
color: string;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#color)

##### dashPattern

```ts
dashPattern: number[];
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`dashPattern`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#dashpattern)

##### fillColor

```ts
fillColor: string;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#fillcolor)

##### showLabel

```ts
showLabel: boolean;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`showLabel`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#showlabel)

##### textColor

```ts
textColor: string;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`textColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#textcolor)

##### textStyle

```ts
textStyle: string;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`textStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#textstyle)

##### width

```ts
width: number;
```

###### Implementation of

[`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ihoverstyle).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#width)

***

### InteractiveZonesStyles

#### Implements

- [`IInteractiveZonesStyles`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iinteractivezonesstyles)

#### Indexable

```ts
[key: string]: IInteractiveZoneStyle
```

#### Constructors

##### Constructor

```ts
new InteractiveZonesStyles(): InteractiveZonesStyles;
```

###### Returns

[`InteractiveZonesStyles`](#interactivezonesstyles)

#### Properties

##### default

```ts
default: IInteractiveZoneStyle;
```

###### Implementation of

[`IInteractiveZonesStyles`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iinteractivezonesstyles).[`default`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#default)

***

### RubberbandStyle

#### Implements

- [`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#irubberbandstyle)

#### Constructors

##### Constructor

```ts
new RubberbandStyle(): RubberbandStyle;
```

###### Returns

[`RubberbandStyle`](#rubberbandstyle)

#### Properties

##### color

```ts
color: string;
```

###### Implementation of

[`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#irubberbandstyle).[`color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#color-1)

##### dashPattern

```ts
dashPattern: number[];
```

###### Implementation of

[`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#irubberbandstyle).[`dashPattern`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#dashpattern-1)

##### fillColor

```ts
fillColor: string;
```

###### Implementation of

[`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#irubberbandstyle).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#fillcolor-2)

##### width

```ts
width: number;
```

###### Implementation of

[`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#irubberbandstyle).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#width-1)

***

### SelectionStyleConfig

#### Implements

- [`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle)

#### Constructors

##### Constructor

```ts
new SelectionStyleConfig(): SelectionStyleConfig;
```

###### Returns

[`SelectionStyleConfig`](#selectionstyleconfig)

#### Properties

##### color

```ts
color: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#color-2)

##### dashPattern

```ts
dashPattern: number[];
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`dashPattern`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#dashpattern-2)

##### fillColor

```ts
fillColor: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#fillcolor-3)

##### resizeGripColor

```ts
resizeGripColor: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`resizeGripColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#resizegripcolor)

##### resizeGripLineColor

```ts
resizeGripLineColor: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`resizeGripLineColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#resizegriplinecolor)

##### resizeGripLineWidth

```ts
resizeGripLineWidth: number;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`resizeGripLineWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#resizegriplinewidth)

##### resizeGripSize

```ts
resizeGripSize: number;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`resizeGripSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#resizegripsize)

##### rotationGripColor

```ts
rotationGripColor: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`rotationGripColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#rotationgripcolor)

##### rotationGripLineColor

```ts
rotationGripLineColor: string;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`rotationGripLineColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#rotationgriplinecolor)

##### rotationGripSize

```ts
rotationGripSize: number;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`rotationGripSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#rotationgripsize)

##### rotationGripSizeOnTouchDevice

```ts
rotationGripSizeOnTouchDevice: number;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`rotationGripSizeOnTouchDevice`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#rotationgripsizeontouchdevice)

##### textColor

```ts
textColor: string;
```

##### width

```ts
width: number;
```

###### Implementation of

[`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iselectionstyle).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#width-2)

***

### SpotlightStyle

#### Implements

- [`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle)

#### Constructors

##### Constructor

```ts
new SpotlightStyle(): SpotlightStyle;
```

###### Returns

[`SpotlightStyle`](#spotlightstyle)

#### Properties

##### color

```ts
color: string;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#color-3)

##### dashPattern

```ts
dashPattern: number[];
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`dashPattern`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#dashpattern-3)

##### fillColor

```ts
fillColor: string;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#fillcolor-4)

##### showLabel

```ts
showLabel: boolean;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`showLabel`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#showlabel-2)

##### textColor

```ts
textColor: string;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`textColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#textcolor-1)

##### textStyle

```ts
textStyle: string;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`textStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#textstyle-1)

##### width

```ts
width: number;
```

###### Implementation of

[`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#ispotlightstyle).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#width-3)