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

# ICanvasStyle

> ***

## Enumerations

### InteractiveZoneLabelPosition

#### Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `inside` | `1` |
|  `outside` | `0` |

## Interfaces

### IArtworkSizeStyle

#### Properties

##### artworkFrameColor

```ts
artworkFrameColor: string;
```

##### artworkFrameShowLabel

```ts
artworkFrameShowLabel: boolean;
```

##### artworkFrameTextFont

```ts
artworkFrameTextFont: string;
```

##### artworkFrameTextFontSize

```ts
artworkFrameTextFontSize: number;
```

##### artworkInnerBorderFrameDash

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

##### oversizeFrameColor

```ts
oversizeFrameColor: string;
```

### ICanvasStyle

#### Properties

##### artworkSize

```ts
artworkSize: IArtworkSizeStyle;
```

##### hover

```ts
hover: IHoverStyle;
```

##### interactiveZones

```ts
interactiveZones: IInteractiveZonesStyles;
```

##### rubberband

```ts
rubberband: IRubberbandStyle;
```

##### selection

```ts
selection: ISelectionStyle;
```

##### spotlight

```ts
spotlight: ISpotlightStyle;
```

***

### IHoverStyle

#### Properties

##### color

```ts
color: string;
```

##### dashPattern

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

##### fillColor

```ts
fillColor: string;
```

##### showLabel

```ts
showLabel: boolean;
```

##### textColor

```ts
textColor: string;
```

##### textStyle

```ts
textStyle: string;
```

##### width

```ts
width: number;
```

***

### IInteractiveZonesStyles

#### Indexable

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

#### Properties

##### default?

```ts
optional default?: IInteractiveZoneStyle;
```

***

### IInteractiveZoneStateStyle

#### Properties

##### borderAltColor?

```ts
optional borderAltColor?: string;
```

##### borderColor?

```ts
optional borderColor?: string;
```

##### borderDash?

```ts
optional borderDash?: number[];
```

##### borderWidth?

```ts
optional borderWidth?: number;
```

##### fillColor?

```ts
optional fillColor?: string;
```

##### labelBackgroundColor?

```ts
optional labelBackgroundColor?: string;
```

##### labelColor?

```ts
optional labelColor?: string;
```

##### labelFont?

```ts
optional labelFont?: string;
```

##### labelFontSize?

```ts
optional labelFontSize?: number;
```

##### labelMargin?

```ts
optional labelMargin?: string | number;
```

##### labelPosition?

```ts
optional labelPosition?: InteractiveZoneLabelPosition;
```

##### labelTitle?

```ts
optional labelTitle?: string;
```

##### showLabel?

```ts
optional showLabel?: boolean;
```

***

### IInteractiveZoneStyle

#### Properties

##### active?

```ts
optional active?: IInteractiveZoneStateStyle;
```

##### activeHighlighted?

```ts
optional activeHighlighted?: IInteractiveZoneStateStyle;
```

##### common?

```ts
optional common?: IInteractiveZoneStateStyle;
```

##### highlighted?

```ts
optional highlighted?: IInteractiveZoneStateStyle;
```

***

### IRubberbandStyle

#### Properties

##### color

```ts
color: string;
```

##### dashPattern

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

##### fillColor

```ts
fillColor: string;
```

##### width

```ts
width: number;
```

***

### ISelectionStyle

#### Properties

##### color

```ts
color: string;
```

##### dashPattern

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

##### fillColor

```ts
fillColor: string;
```

##### resizeGripColor

```ts
resizeGripColor: string;
```

##### resizeGripLineColor

```ts
resizeGripLineColor: string;
```

##### resizeGripLineWidth

```ts
resizeGripLineWidth: number;
```

##### resizeGripSize

```ts
resizeGripSize: number;
```

##### rotationGripColor

```ts
rotationGripColor: string;
```

##### rotationGripLineColor

```ts
rotationGripLineColor: string;
```

##### rotationGripSize

```ts
rotationGripSize: number;
```

##### rotationGripSizeOnTouchDevice

```ts
rotationGripSizeOnTouchDevice: number;
```

##### width

```ts
width: number;
```

***

### ISpotlightStyle

#### Properties

##### color

```ts
color: string;
```

##### dashPattern

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

##### fillColor

```ts
fillColor: string;
```

##### showLabel

```ts
showLabel: boolean;
```

##### textColor

```ts
textColor: string;
```

##### textStyle

```ts
textStyle: string;
```

##### width

```ts
width: number;
```