ElementList
A list of elements.
Methods
countfunctionGets the number of items in the list.
Returns
The number of items.
number
toArrayfunctionConverts the list to an array.
Returns
An array containing all items. The items are the same as in the list.
For more information, see AbsoluteElement.
forEachfunctionExecutes a function for each item in the list.
Parameters
callbackForEachCallback<AbsoluteElement>The function to run for each item.
For more information, see AbsoluteElement.
Parameters
itemAbsoluteElementThe current item in the list.
For more information, see AbsoluteElement.
indexnumberThe index of the current item.
Returns
void
Returns
void
filterfunctionCreates a new array with items that pass a test.
Parameters
filterFilterPredicate<AbsoluteElement>A function that tests each item. Returns true to keep the item.
For more information, see AbsoluteElement.
Parameters
itemAbsoluteElementThe item to test.
For more information, see AbsoluteElement.
Returns
true if the item should be included, otherwise false.
boolean
Returns
An array of items that passed the test.
For more information, see AbsoluteElement.
moveBeforefunctionMoves an existing item to a new position right before another item.
Parameters
refundefined | AbsoluteElementThe existing item to move the item before.
If ref is undefined, the item is moved to the end of the list.
If ref does not exist in the list, the operation fails.
For more information, see AbsoluteElement.
itemAbsoluteElementThe item to move. The operation fails if the item is not already in the list.
For more information, see AbsoluteElement.
Returns
void
moveAfterfunctionMoves an existing item to a new position right after another item.
Parameters
refundefined | AbsoluteElementThe existing item to move the item after.
If ref is undefined, the item is moved to the end of the list.
If ref does not exist in the list, the operation fails.
For more information, see AbsoluteElement.
itemAbsoluteElementThe item to move. The operation fails if the item is not already in the list.
For more information, see AbsoluteElement.
Returns
void
deletefunctionRemoves an item from the list.
Parameters
itemAbsoluteElementThe item to remove from the list.
For more information, see AbsoluteElement.
Returns
void
insertBeforefunctionAdds a copy of an item to the list and places it right before another item.
Parameters
refundefined | AbsoluteElementThe existing item to place the new item before.
If ref is undefined, the new item is added at the end of the list.
If ref does not exist in the list, the operation fails.
For more information, see AbsoluteElement.
stateInsertableElementStateAn element state that can be inserted into a page.
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 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
Returns
The added item, or undefined if the operation failed.
For more information, see AbsoluteElement.
insertAfterfunctionAdds a copy of an item to the list and places it right after another item.
Parameters
refundefined | AbsoluteElementThe existing item to place the new item after.
If ref is undefined, the new item is added at the end of the list.
If ref does not exist in the list, the operation fails.
For more information, see AbsoluteElement.
stateInsertableElementStateAn element state that can be inserted into a page.
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 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
Returns
The added item, or undefined if the operation failed.
For more information, see AbsoluteElement.