--- title: "ICanvas | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvas/" --- # ICanvas > `void` ## Interfaces ### ICanvas #### Properties ##### badViolationIconCssClass ```ts badViolationIconCssClass: string; ``` ##### canvasElementSize ```ts canvasElementSize: object; ``` ###### height? ```ts optional height?: number; ``` ###### width? ```ts optional width?: number; ``` ##### contentAngle ```ts contentAngle: number; ``` ##### currentItemHandler ```ts currentItemHandler: ItemHandler; ``` ##### designAtomsApiClient ```ts designAtomsApiClient: IDesignAtomsApiClient; ``` ##### disableSmoothing ```ts disableSmoothing: boolean; ``` ##### fontRegistry ```ts fontRegistry: FontRegistry; ``` ##### frontEndTextRenderingEnabled ```ts frontEndTextRenderingEnabled: boolean; ``` ##### goodViolationIconCssClass ```ts goodViolationIconCssClass: string; ``` ##### height ```ts height: number; ``` ##### history ```ts history: History; ``` ##### hitTestManager ```ts hitTestManager: IHitTestManager; ``` ##### hoverHandler ```ts hoverHandler: IHoverHandler; ``` ##### ignorePermissionsMode ```ts ignorePermissionsMode: boolean; ``` ##### initialization ```ts initialization: boolean; ``` ##### isInitialized ```ts isInitialized: boolean; ``` ##### isSelectionDragging ```ts isSelectionDragging: boolean; ``` ##### isSelectionIdle ```ts isSelectionIdle: boolean; ``` ##### isSelectionLocked ```ts isSelectionLocked: boolean; ``` ##### isSelectionResizing ```ts isSelectionResizing: boolean; ``` ##### isSelectionRotating ```ts isSelectionRotating: boolean; ``` ##### layers ```ts layers: LayerCollection; ``` ##### maxFontSize ```ts maxFontSize: number; ``` ##### maxLeading ```ts maxLeading: number; ``` ##### minFontSize ```ts minFontSize: number; ``` ##### minLeading ```ts minLeading: number; ``` ##### mul ```ts mul: number; ``` ##### offset ```ts offset: PointF; ``` ##### previewMode ```ts previewMode: boolean; ``` ##### qualityBadToGoodChangeScaleBarCssClass ```ts qualityBadToGoodChangeScaleBarCssClass: string; ``` ##### qualityBadToWarningChangeScaleBarCssClass ```ts qualityBadToWarningChangeScaleBarCssClass: string; ``` ##### qualityChangeScaleBarCssClass ```ts qualityChangeScaleBarCssClass: string; ``` ##### qualityNoAnimationChangeScaleBarCssClass ```ts qualityNoAnimationChangeScaleBarCssClass: string; ``` ##### qualityWarningToGoodChangeScaleBarCssClass ```ts qualityWarningToGoodChangeScaleBarCssClass: string; ``` ##### renderingConfigProvider ```ts renderingConfigProvider: IRenderingConfigProvider; ``` ##### service ```ts service: Service; ``` ##### style ```ts style: CanvasRendererStyle; ``` ##### textEditor ```ts textEditor: ITextEditor; ``` ##### textWhizz ```ts textWhizz: any; ``` ##### viewerConfiguration ```ts viewerConfiguration: IViewerConfiguration; ``` ##### warningViolationIconCssClass ```ts warningViolationIconCssClass: string; ``` ##### width ```ts width: number; ``` ##### workspace ```ts workspace: IWorkspace; ``` ##### workspaceHeight ```ts workspaceHeight: number; ``` ##### workspaceWidth ```ts workspaceWidth: number; ``` ##### zoom ```ts zoom: number; ``` #### Methods ##### addPlaceholderButtonGroup() ```ts addPlaceholderButtonGroup(placeholder): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) | ###### Returns ##### addSelectedItemHandler() ```ts addSelectedItemHandler(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `void` ##### addViolationContainer() ```ts addViolationContainer(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | ###### Returns `void` ##### clearSelectedItemHandlers() ```ts clearSelectedItemHandlers(): void; ``` ###### Returns `void` ##### continueRedraw() ```ts continueRedraw(): void; ``` ###### Returns `void` ##### deleteItemHandler() ```ts deleteItemHandler(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `void` ##### disableSelection() ```ts disableSelection(): void; ``` ###### Returns `void` ##### doesContainItem() ```ts doesContainItem(item): boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `item` | `Item` | ###### Returns `boolean` ##### drawWaitClock() ```ts drawWaitClock(context, center): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `context` | `CanvasRenderingContext2D` | | `center` | `PointF` | ###### Returns `void` ##### enableSelection() ```ts enableSelection(): void; ``` ###### Returns `void` ##### ensureFocus() ```ts ensureFocus(): void; ``` ###### Returns `void` ##### getAllItemHandlers() ```ts getAllItemHandlers(options?): ItemHandler[]; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `options?` | [`GetItemHandlersOptions`](#getitemhandlersoptions) | ###### Returns [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)[] ##### getButtonGroupRectInGripsDiv() ```ts getButtonGroupRectInGripsDiv(div, ignoreRotate?): RectangleF; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `div` | `HTMLElement` | | `ignoreRotate?` | `boolean` | ###### Returns `RectangleF` ##### getData() ```ts getData(forService?, layerId?): CanvasData; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `forService?` | `boolean` | | `layerId?` | `string` | ###### Returns [`CanvasData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CanvasData.md#canvasdata) ##### getItemHandler() ```ts getItemHandler(item): THandler; ``` ###### Type Parameters | Type Parameter | | ------ | | `THandler` *extends* [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Parameters | Parameter | Type | | ------ | ------ | | `item` | `Item` | ###### Returns `THandler` ##### isDragSource() ```ts isDragSource(itemHandler): boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `boolean` ##### isDragTarget() ```ts isDragTarget(itemHandler): boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `boolean` ##### isItemHandlerSelected() ```ts isItemHandlerSelected(itemHandler): boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `boolean` ##### isOnlyThisItemHandlerSelected() ```ts isOnlyThisItemHandlerSelected(itemHandler): boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | ###### Returns `boolean` ##### onLayerTextureLoaded() ```ts onLayerTextureLoaded(): void; ``` ###### Returns `void` ##### onScroll() ```ts onScroll(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### onScroll() ```ts onScroll(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### onSelectionLocked() ```ts onSelectionLocked(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### onSelectionLocked() ```ts onSelectionLocked(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### pauseRedraw() ```ts pauseRedraw(): void; ``` ###### Returns `void` ##### pauseUpdateTexts() ```ts pauseUpdateTexts(): void; ``` ###### Returns `void` ##### redraw() ```ts redraw(): void; ``` ###### Returns `void` ##### redrawActiveTexts() ```ts redrawActiveTexts(): void; ``` ###### Returns `void` ##### redrawDesign() ```ts redrawDesign(): void; ``` ###### Returns `void` ##### removePlaceholderButtonGroup() ```ts removePlaceholderButtonGroup(placeholder): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) | ###### Returns `void` ##### removeSelectedItemHandler() ```ts removeSelectedItemHandler(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) | ###### Returns `void` ##### removeViolationContainer() ```ts removeViolationContainer(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | ###### Returns `void` ##### resumeUpdateTexts() ```ts resumeUpdateTexts(): void; ``` ###### Returns `void` ##### selectedItemHandlerChanged() ```ts selectedItemHandlerChanged(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### selectedItemHandlerChanged() ```ts selectedItemHandlerChanged(handler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `void` ##### setCursor() ```ts setCursor(value, onBody): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `value` | `any` | | `onBody` | `boolean` | ###### Returns `void` ##### setSelectedItemHandlers() ```ts setSelectedItemHandlers(itemHandlers): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandlers` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)[] | ###### Returns `void` ##### subscribeLimitsMessage() ```ts subscribeLimitsMessage(): void; ``` ###### Returns `void` ##### unsubscribeLimitsMessage() ```ts unsubscribeLimitsMessage(): void; ``` ###### Returns `void` ##### updateButtonGroups() ```ts updateButtonGroups(options): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `options` | [`UpdateButtonGroupsOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/UpdateButtonGroupsOptions.md#updatebuttongroupsoptions) | ###### Returns `void` ##### updatePlaceholderButtonGroup() ```ts updatePlaceholderButtonGroup(placeholder): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `placeholder` | \| [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) \| [`GroupItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/GroupItemHandler.md#groupitemhandler) | ###### Returns `void` ##### updatePlaceholderButtonGroupPosition() ```ts updatePlaceholderButtonGroupPosition(placeholder): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `placeholder` | [`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler) | ###### Returns `void` ##### updatePlaceholderButtonGroups() ```ts updatePlaceholderButtonGroups(): void; ``` ###### Returns `void` ##### updateSelection() ```ts updateSelection(force?): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `force?` | `boolean` | ###### Returns `void` ##### updateTexts() ```ts updateTexts(): void; ``` ###### Returns `void` ##### updateViolationContainer() ```ts updateViolationContainer(itemHandler, updatePosition?): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | | `updatePosition?` | `boolean` | ###### Returns `void` ##### updateViolationContainerPosition() ```ts updateViolationContainerPosition(itemHandler): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandler` | [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) | ###### Returns `void` ##### updateViolationContainers() ```ts updateViolationContainers(updatePosition?, onlyVisible?): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `updatePosition?` | `boolean` | | `onlyVisible?` | `boolean` | ###### Returns `void` ##### violationWarningButtonHitTestObject() ```ts violationWarningButtonHitTestObject(pt): BaseRectangleItemHandler; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `pt` | `PointF` | ###### Returns [`BaseRectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseRectangleItemHandler.md#baserectangleitemhandler) ##### waitUpdate() ```ts waitUpdate(itemHandlers?): Promise; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `itemHandlers?` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)[] | ###### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`[]\> ##### zoomChanged() ```ts zoomChanged(listener): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `listener` | `any` | ###### Returns `void` ##### zoomChanged() ```ts zoomChanged(listener): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `listener` | `any` | ###### Returns `void` ## Type Aliases ### GetItemHandlersOptions ```ts type GetItemHandlersOptions = object; ``` #### Properties ##### blackListFilter? ```ts optional blackListFilter?: (handler) => boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `boolean` ##### excludeGroupItems? ```ts optional excludeGroupItems?: boolean; ``` ##### flatGroupItems? ```ts optional flatGroupItems?: boolean; ``` ##### onlyType? ```ts optional onlyType?: | ItemHandlerType | ItemHandlerType[]; ``` ##### onlyUnlocked? ```ts optional onlyUnlocked?: boolean; ``` ##### onlyVisible? ```ts optional onlyVisible?: boolean; ``` ##### whiteListFilter? ```ts optional whiteListFilter?: (handler) => boolean; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `handler` | `any` | ###### Returns `boolean` *** ### ItemHandlerType ```ts type ItemHandlerType = | typeof PlaceholderItemHandler | typeof ImageItemHandler | typeof ItemHandler | typeof PlainTextItemHandler | typeof RectangleItemHandler | typeof ShapeItemHandler | typeof BaseTextItemHandler | typeof NewBaseTextItemHandler; ```