--- title: "Interface: ICanvasConfig | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ICanvasConfig/" --- # Interface: ICanvasConfig > A structure containing canvas settings in the editor. ## Example ``` js configuration = { canvas: { shadowEnabled: false, autoItemSelectionEnabled: true, floatingToolbar: { enabled: true, mode: "Inside", buttons: [ "Handle", "Select", "Edit" ] } } }; ``` ## Properties ### style? > `optional` **style?**: [`ICanvasStyleConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ICanvasStyleConfig.md) A structure defining the appearance of grips of design elements. *** ### ~~containerColor?~~ > `optional` **containerColor?**: `string` The color of the HTML element placed under the canvas. #### Deprecated Use the `color` property instead. *** ### color? > `optional` **color?**: `string` The canvas color; this color is visible if a transparent object is placed on the canvas. *** ### shadowEnabled? > `optional` **shadowEnabled?**: `boolean` Enables the canvas shadow. The default value is `false`. *** ### paddingPct? > `optional` **paddingPct?**: `number` Padding between the canvas and the canvas viewer, in percent. *** ### pinchZoomEnabled? > `optional` **pinchZoomEnabled?**: `boolean` Allows users to zoom the canvas using the pinch gesture on mobile devices. The default value is `true`. *** ### maskedPlaceholderUnderscoreEnabled? > `optional` **maskedPlaceholderUnderscoreEnabled?**: `boolean` Enables displaying underscores in blank masked text layers. If `false` and the user has partially filled the text placeholder in, then the rest blank symbols are displayed as spaces. If `true`, the blank portion of the text layer displays underscores. The default value is `true`. *** ### canvasItemHoverEnabled? > `optional` **canvasItemHoverEnabled?**: `boolean` Enables text labels for editable design elements. The default value is `false`. For details, see the [Element Names](https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/element-names.html) topic. *** ### suppressOutOfRegionManipulation? > `optional` **suppressOutOfRegionManipulation?**: `boolean` Disallows working with elements outside of regions on the canvas. If `true`, then your users cannot manipulate items out of regions. The default value is `true`. *** ### violationWarningButtonsEnabled? > `optional` **violationWarningButtonsEnabled?**: `boolean` Allows for displaying the image quality warnings on the canvas. If `true`, then notifying icons appear on such violation warnings as low image resolution, safety line violation, region violation, and clipping text. The default value is `false`. *** ### qualityChangeContainersEnabled? > `optional` **qualityChangeContainersEnabled?**: `boolean` Enables a bar displaying the DPI value of images on the canvas. If `true`, then the bar appears when your users resizing images or image placeholder. The default value is `false`. *** ### ~~floatingItemToolbarEnabled?~~ > `optional` **floatingItemToolbarEnabled?**: `boolean` Enables the floating toolbar with the **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. The default value is `false`. #### Deprecated Instead, you can fine-tune the floating toolbar through the [ICanvasConfig.floatingToolbar](#floatingtoolbar) object. *** ### floatingToolbar? > `optional` **floatingToolbar?**: `IFloatingItemToolbarConfig` Defines parameters of the floating toolbar with the **Handle**, **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. **Handle** appears image placeholders to manage their content. **Select Image** appears for images and image placeholders to change the image. The **Edit** button allows for editing images and the content of text elements and image placeholders. The default value is `false`. *** ### autoItemSelectionEnabled? > `optional` **autoItemSelectionEnabled?**: `boolean` Allows for auto selecting the first design element in the advanced editing mode. The default value is `false`. *** ### multipleObjectsUpdateOptimizationEnabled? > `optional` **multipleObjectsUpdateOptimizationEnabled?**: `boolean` Optimizes the load time of templates consisting of a large number of layers. The default value is `true`. *** ### autoPlaceholderEditModeEnabled? > `optional` **autoPlaceholderEditModeEnabled?**: `boolean` Allows your users to work with the content of image placeholders by clicking a placeholder in either simple or advanced edit mode. If `true`, the **Handle** does not appear on image placeholders. The default value is `false`. *** ### zoom? > `optional` **zoom?**: [`IRangeParams`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IRangeParams.md) Defines the zoom parameters for the canvas. *** ### rulers? > `optional` **rulers?**: [`IRulersConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRulersConfig.md) Defines parameters of rulers. *** ### snapLines? > `optional` **snapLines?**: [`ISnapLinesConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ISnapLinesConfig.md) Defines parameters of snap lines. *** ### rotation? > `optional` **rotation?**: [`IRotationConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRotationConfig.md) Defines the canvas rotation parameters. By default, the user can rotate canvas at 90 degrees when clicking the **Rotate** button in the Bottom Toolbar. #### Example ``` js configuration = { canvas: { rotation: { type: "Rotate180" } } }; ``` *** ### printZone? > `optional` **printZone?**: [IPrintZoneConfiguration](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPrintZoneConfiguration.md) Defines the appearance of the bleed zone. For details, see [Changing the Appearance of the Bleed Zone](https://customerscanvas.com/dev/editors/iframe-api/product-definition/bleeds-and-safety-zone.html). *** ### handlers? > `optional` **handlers?**: [IHandlersConfiguration](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IHandlersConfiguration.md) A structure defining the item processing rules. #### Example ``` js configuration = { canvas: { handlers: { placeholderEditingViewMode: "normal" } } }; ``` *** ### gridVisible? > `optional` **gridVisible?**: `boolean` Enables the grid when the canvas opens. The default value is `false`. *** ### safetyLinesVisible? > `optional` **safetyLinesVisible?**: `boolean` Enables safety lines when the canvas opens. The default value is `true`. *** ### snapLinesVisible? > `optional` **snapLinesVisible?**: `boolean` Enables snap lines when the canvas opens. The default value is `true`. *** ### historySize? > `optional` **historySize?**: `number` The number of actions in the Design Editor that can be reverted by using the **Undo** button. The default value is `10`. *** ### textEditor? > `optional` **textEditor?**: `TextEditorMode` Specifies the text editor mode when the WYSIWYG editor is active: - The `"default"` mode enables an editor depending on the desktop or mobile platform (TextWhizz or HTML). - The `"html"` mode enables an HTML-based editor, which allows you to use the Input Method Editor. - The `"none"` mode enables the Classic editor with popup-boxes and the Rich text editor. *** ### listSettings? > `optional` **listSettings?**: [IListConfiguration](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IListConfiguration.md) A structure containing the configuration of text lists. For more details, see [Text lists](https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/lists.html). *** ### mockupMarginWorkaroundEnabled? > `optional` **mockupMarginWorkaroundEnabled?**: `boolean` Enables white margin around design to prevent drawing of phantom 1 pixel lines when the design has the same size as the mockup. *** ### curvedTextBaselineDrawStates? > `optional` **curvedTextBaselineDrawStates?**: `ItemHandlerState`[] Specifies in which states to draw baseline of curved text objects. The default value is [`edit`, `select`, `resize`, `rotate`]. Possible states are: - `idle` - when no action is performed on the object and it is neither selected nor hovered. - `edit` - when text object is being edited. - `select` - when text object is selected. - `hover` - when text object is hovered. - `move` - when text object is being moved. - `resize` - when text object is being resized. - `rotate` - when text object is being rotated. *** ### rotatedTextInPlaceEditEnabled? > `optional` **rotatedTextInPlaceEditEnabled?**: `boolean` If `false`, any text rotated by any angle will be edited in a plain text pop up, and non-rotated text will be edited in place. By default, this property is `true`, and rotated text will be turned to `0` degrees when being edited on the canvas. *** ### inactiveContainerTransparencyEnabled? > `optional` **inactiveContainerTransparencyEnabled?**: `boolean` If not defined or `true`, displays the content of spot containers transparent. The default value is `true`. For more details, refer to the [Post Press Finishing](https://customerscanvas.com/dev/editors/iframe-api/product-definition/post-press-finishing-layers.html) topic. *** ### inactiveContainerTransparencyLevel? > `optional` **inactiveContainerTransparencyLevel?**: `number` Defines how transparent inactive containers should be. Its value is in the range [`0`, `1`]. If `0`, the content of inactive containers becomes completely opaque. If `1`, it becomes 100% transparent. The default value is `0.8`. For more details, refer to the [Post Press Finishing](https://customerscanvas.com/dev/editors/iframe-api/product-definition/post-press-finishing-layers.html) topic.