AbsoluteElementState
An element state that can exist on an absolute page state.
Type declaration
A state that creates a rectangle element.
The rectangle can be filled with image content, video content, or a solid color.
typestringRead-onlyThe type of content.
This must be "rect".
fillFillStateRead-onlyThe appearance of the rectangle's interior.
mediaContainerundefined | MediaFillStateThe media fill for the path, if any.
A state that creates an image fill.
typestringRead-onlyThe type of media.
This must be "image".
imageRefImageRefRead-onlyA unique identifier that points to an image asset in Canva's backend.
flipXbooleanIf true, the image is flipped horizontally.
flipYbooleanIf true, the image is flipped vertically.
A state that creates a video fill.
typestringRead-onlyThe type of media.
This must be "video".
videoRefVideoRefRead-onlyA unique identifier that points to a video asset in Canva's backend.
flipXbooleanIf true, the video is flipped horizontally.
flipYbooleanIf true, the video is flipped vertically.
colorContainerundefined | ColorFillStateThe color fill for the path, if any.
A state that creates a solid color fill.
typestringRead-onlyThe type of color.
This must be "solid".
colorstringThe color of the fill.
This must be a valid, six-digit hex code, prefixed with a # symbol.
- Must be six characters long.
- Must start with a
#. - Must use lowercase letters.
Example
"#ff0099"
Represents something that's not supported by the Apps SDK.
typestringRead-onlyThis must be "unsupported".
strokeStrokeStateRead-onlyThe outline of the rectangle.
weightnumberThe weight (thickness) of the stroke.
Minimum: 0
Maximum: 100
colorContainerColorFillStateThe color of the stroke.
A state that creates a solid color fill.
typestringRead-onlyThe type of color.
This must be "solid".
colorstringThe color of the fill.
This must be a valid, six-digit hex code, prefixed with a # symbol.
- Must be six characters long.
- Must start with a
#. - Must use lowercase letters.
Example
"#ff0099"
Represents something that's not supported by the Apps SDK.
typestringRead-onlyThis must be "unsupported".
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1
A state that creates a vector shape element.
typestringRead-onlyThe type of content.
This must be "shape".
viewBoxAlignedBoxStateRead-onlyThe scale and cropping of the shape.
topnumberRead-onlyThe distance of the shape from the top edge of the element, in pixels.
leftnumberRead-onlyThe distance of the shape from the left edge of the element, in pixels.
widthnumberRead-onlyThe width of the view box, in pixels.
heightnumberRead-onlyThe height of the view box, in pixels.
pathsListState<PathState>Read-onlyThe paths that define the structure of the shape.
- Must have between 1 and 30 paths.
- Total size of all paths must not exceed 2kb.
- Maximum of 6 unique fill colors across all paths.
For more information, see ListState.
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1
A state that creates a group element.
typestringRead-onlyThe type of content.
This must be "group".
contentsListState<GroupContentElementState>Read-onlyThe elements that exist within the group.
For more information, see ListState.
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1
A state that creates an embed element, such as a YouTube video.
typestringRead-onlyThe type of content.
This must be "embed".
urlstringRead-onlyThe URL of the rich media.
This URL must be supported by the Iframely API.
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1
A state that creates a text element.
typestringRead-onlyThe type of content.
This must be "text".
textobjectRead-onlyThe text content.
regionsListState<TextRegion>A list of items that can be read.
For more information, see ListState.
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1
An element state that is not supported by the Apps SDK.
typestringRead-onlyThis must be "unsupported".
widthnumberRead-onlyA width, in pixels.
heightnumberRead-onlyA height, in pixels.
lockedbooleanRead-onlyIf true, the element is locked and cannot be modified.
topnumberRead-onlyThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
leftnumberRead-onlyThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
rotationnumberRead-onlyA rotation, in degrees.
Minimum: -180
Maximum: 180
transparencynumberRead-onlyTransparency as a percentage.
Minimum: 0
Maximum: 1