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

# IShapeItemData

> A structure defining common shape parameters and parameters of SVG images imported in the Shape mode.

## Interfaces

### IShapeItemData

#### Example

```json
{
   "defaultItemsConfig": {
       "shape": {
           "borderWidth": 2,
           "fillColor": "cmyk(0%, 0%, 0%, 25%, 100%)",
           "shapePermissions": {
               "allowChangeBorderWidth": false
           },
           "location": {
               "x": "100%", "y": "100%",
               "originX": "right",
               "originY": "bottom"
           }
       }
   }
}
```

#### Extends

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

#### Extended by

- [`IEllipseItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IEllipseItemData.md#iellipseitemdata)
- [`IPlaceholderItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IPlaceholderItemData.md#iplaceholderitemdata)
- [`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata)

#### Properties

##### adjustSize?

```ts
optional adjustSize?: boolean;
```

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`adjustSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#adjustsize)

##### angle?

```ts
optional angle?: number;
```

An angle, which design elements are rotated to. By default, this value is `0`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`angle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#angle)

##### blendMode?

```ts
optional blendMode?: BlendMode;
```

A blend mode that applies to design elements being added to the canvas.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`blendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#blendmode)

##### borderColor?

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

The border color. The default value is `"rgba(0,0,0,1)"`.

##### borderWidth?

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

The border width, in points. The default value is `1`.

##### fillColor?

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

The fill color for shapes and placeholders. The default value is `"rgba(112,112,112,1)"` for shapes and is `"rgba(0,0,0,0)"` for image placeholders.

##### height?

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

The height of design elements being added to the canvas, in points or percent. For QR codes, the `width` value is used for both `width` and `height`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`height`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#height)

##### isVariable?

```ts
optional isVariable?: boolean;
```

Marks a design element as a variable item. The default value is `false`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`isVariable`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#isvariable)

##### itemPermissions?

```ts
optional itemPermissions?: IItemPermissionsData;
```

A structure defining the Item Menu and the Floating item toolbar for design elements.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`itemPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#itempermissions)

##### location?

```ts
optional location?: ILocationData;
```

The coordinates of design elements being added to the canvas. By default, you can add them to the center of your product.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`location`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#location)

##### manipulationPermissions?

```ts
optional manipulationPermissions?: IManipulationPermissionsData;
```

A structure defining the manipulation permissions for design elements.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`manipulationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#manipulationpermissions)

##### name?

```ts
optional name?: string;
```

The name of design elements being added to the canvas.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`name`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#name)

##### opacity?

```ts
optional opacity?: number;
```

An opacity that applies to design elements. This value can be from `0` to `1`. By default, it is `1`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`opacity`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#opacity)

##### overprintFill?

```ts
optional overprintFill?: boolean;
```

##### overprintStroke?

```ts
optional overprintStroke?: boolean;
```

##### shapePermissions?

```ts
optional shapePermissions?: IShapePermissionsData;
```

Defines permissions for shapes.

##### textWrappingMode?

```ts
optional textWrappingMode?: WrappingMode;
```

A wrapping mode that applies to wrap text around design elements, one of `"none"`, `"square"`, or `"tight"`. By default, it is `"none"`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`textWrappingMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#textwrappingmode)

##### themeBinding?

```ts
optional themeBinding?: IThemeBindingData;
```

A style or a color that applies to new design elements.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`themeBinding`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#themebinding)

##### violationSettings?

```ts
optional violationSettings?: IViolationSettings;
```

A structure defining the design validation parameters and warnings.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`violationSettings`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#violationsettings)

##### visible?

```ts
optional visible?: boolean;
```

Indicates whether the design element is visible on the canvas. The default value is `true`.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`visible`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#visible)

##### visualizationPermissions?

```ts
optional visualizationPermissions?: IVisualizationPermissionsData;
```

A structure defining the visualization permissions for design elements.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`visualizationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#visualizationpermissions)

##### width?

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

The width of design elements being added to the canvas, in points or percent.

###### Inherited from

[`IItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#iitemdata).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md#width)