---
title: "Interface: ICanvasStyleConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ICanvasStyleConfig/"
---

# Interface: ICanvasStyleConfig

> A structure defining the appearance of grips of design elements.

## Example

``` js
configuration = {
  canvas: {
    style: { 
      hover: {
        color: "green",
        width: 5,
        fillColor: "rgba(230, 250, 236, 0.5)",
        dashPattern: [2, 2],
        textColor: "green"
      }
    }
  }
};
```

## Properties

### selection

> **selection**: [`ISelectionStyle`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ISelectionStyle.md)

One or more selected design elements.

***

### hover

> **hover**: [`IHoverStyle`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IHoverStyle.md)

The object that the cursor is hovering over.

***

### spotlight

> **spotlight**: [`ISpotlightStyle`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ISpotlightStyle.md)

A highlighted object.

***

### rubberband

> **rubberband**: [`IRubberbandStyle`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRubberbandStyle.md)

A selected area when the left mouse button is holding down (or when the touchscreen is tapped).

***

### interactiveZones

> **interactiveZones**: `IInteractiveZonesStyles`

***

### artworkSize

> **artworkSize**: `IArtworkSizeStyle`