addNativeElement
This API is deprecated, and is no longer recommended for use, and should be removed from your app.
Adds a native element to the user's design.
Parameters
element
object
RequiredThe element to add to the user's design.
The type has been superseded by DesignElement
.
An element that's natively supported by the Canva editor.
The type has been superseded by ImageElement
.
An element that renders image content.
type
string
RequiredThe type of element.
This must be "image"
.
altText
AltText | undefined
RequiredA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
dataUrl
string
OptionalA data URL that contains the image data.
ref
ImageRef
OptionalA unique identifier that points to an image asset in Canva's backend.
The type has been superseded by VideoElement
.
An element that renders video content.
type
string
RequiredThe type of element.
This must be "video"
.
ref
VideoRef
RequiredA unique identifier that points to a video asset in Canva's backend.
altText
AltText | undefined
RequiredA description of the video content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
The type has been superseded by EmbedElement
.
An element that renders rich media, such as a YouTube video.
type
string
RequiredThe type of element.
This must be "embed"
.
url
string
RequiredThe URL of the rich media.
This URL must be supported by the Iframely API.
The type has been superseded by TextElement
.
An element that renders text content.
type
string
RequiredThe type of element.
This must be "text"
.
children
string[]
RequiredThe text content.
Only the first element in this array is used.
fontSize
number
OptionalThe size of the text.
Minimum: 1
Maximum: 100
Default value: 16
textAlign
string
OptionalThe alignment of the text.
Default value: "start"
Available values:
"start"
"center"
"end"
"justify"
color
string
OptionalThe color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontRef
FontRef
OptionalA unique identifier that points to a font asset in Canva's backend.
fontWeight
FontWeight
OptionalThe weight (thickness) of the font.
Default value: "normal"
Available values:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
OptionalThe style of the font.
Default value: "normal"
Available values:
"normal"
"italic"
decoration
string
OptionalThe decoration of the font.
Default value: "none"
Available values:
"none"
"underline"
The type has been superseded by ShapeElement
.
An element that renders a vector shape.
type
string
RequiredThe type of element.
This must be "shape"
.
viewBox
ShapeViewBox
RequiredOptions for configuring the scale and cropping of the shape.
top
number
RequiredThe distance of the shape from the top edge of the element, in pixels.
left
number
RequiredThe distance of the shape from the left edge of the element, in pixels.
width
number
RequiredThe width of the view box, in pixels.
height
number
RequiredThe height of the view box, in pixels.
paths
ShapePath[]
RequiredThe paths that define the structure of the shape.
- There must be between 1 and 30 paths (inclusive).
- The maximum combined size of all paths must not exceed 2kb.
- The maximum number of unique fill colors across all paths is 6.
d
string
RequiredThe shape of the path.
This is similar to the d
attribute of an SVG's path
element, with some limitations:
- The path must start with an M command.
- The path must not have more than one M command.
- The path must not use the Q command.
- The path must be closed, either by:
- Using a Z command at the end of the path
- Having the last coordinate match the first coordinate
fill
Fill
RequiredThe appearance of the path's interior.
dropTarget
boolean
OptionalIf true
, users can replace a fill by dropping an image or video onto it.
color
string
OptionalThe color of the fill as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
asset
object
OptionalAn image or video to use as the fill.
An image asset that fills a path's interior.
type
string
RequiredThe type of fill.
This must be "image"
.
ref
ImageRef
RequiredA unique identifier that points to an image asset in Canva's backend.
altText
AltText
OptionalA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
A video asset that fills a path's interior.
type
string
RequiredThe type of fill.
This must be "video"
.
ref
VideoRef
RequiredA unique identifier that points to a video asset in Canva's backend.
altText
AltText
OptionalA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
stroke
PathStroke
OptionalThe outline of the path.
weight
number
RequiredThe weight (thickness) of the stroke.
Minimum: 0
Maximum: 100
color
string
RequiredThe color of the stroke as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
strokeAlign
string
RequiredThe alignment of the stroke.
This must be "inset"
.
The type has been superseded by GroupElement
.
An element that contains two or more elements.
type
string
RequiredThe type of element.
This must be "group"
.
children
GroupContentAtPoint[]
RequiredThe elements to render within the group.
- Each element within a group must have dimensions and a position.
- The dimensions and positions are relative to the dimensions and positions of the group.
The type has been superseded by ElementAtPoint
.
An element that's natively supported by the Canva editor and has positional properties.
The type has been superseded by ImageElementAtPoint
.
An element that renders image content and has positional properties.
type
string
RequiredThe type of element.
This must be "image"
.
altText
AltText | undefined
RequiredA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
width
number
RequiredA width, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
height
number
RequiredA height, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
dataUrl
string
OptionalA data URL that contains the image data.
ref
ImageRef
OptionalA unique identifier that points to an image asset in Canva's backend.
The type has been superseded by VideoElementAtPoint
.
An element that renders video content and has positional properties.
type
string
RequiredThe type of element.
This must be "video"
.
ref
VideoRef
RequiredA unique identifier that points to a video asset in Canva's backend.
altText
AltText | undefined
RequiredA description of the video content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
width
number
RequiredA width, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
height
number
RequiredA height, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
The type has been superseded by EmbedElementAtPoint
.
An element that renders rich media, such as a YouTube video, and has positional properties.
type
string
RequiredThe type of element.
This must be "embed"
.
url
string
RequiredThe URL of the rich media.
This URL must be supported by the Iframely API.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
width
number
RequiredA width, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
height
number
RequiredA height, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
The type has been superseded by TextElementAtPoint
.
An element that renders text content and has positional properties.
type
string
RequiredThe type of element.
This must be "text"
.
children
string[]
RequiredThe text content.
Only the first element in this array is used.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
fontSize
number
OptionalThe size of the text.
Minimum: 1
Maximum: 100
Default value: 16
textAlign
string
OptionalThe alignment of the text.
Default value: "start"
Available values:
"start"
"center"
"end"
"justify"
color
string
OptionalThe color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontRef
FontRef
OptionalA unique identifier that points to a font asset in Canva's backend.
fontWeight
FontWeight
OptionalThe weight (thickness) of the font.
Default value: "normal"
Available values:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
OptionalThe style of the font.
Default value: "normal"
Available values:
"normal"
"italic"
decoration
string
OptionalThe decoration of the font.
Default value: "none"
Available values:
"none"
"underline"
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
width
number
OptionalThe width of the element, in pixels.
Minimum: 0
Maximum: 32767
The type has been superseded by ShapeElementAtPoint
.
An element that renders a vector shape and has positional properties.
type
string
RequiredThe type of element.
This must be "shape"
.
viewBox
ShapeViewBox
RequiredOptions for configuring the scale and cropping of the shape.
top
number
RequiredThe distance of the shape from the top edge of the element, in pixels.
left
number
RequiredThe distance of the shape from the left edge of the element, in pixels.
width
number
RequiredThe width of the view box, in pixels.
height
number
RequiredThe height of the view box, in pixels.
paths
ShapePath[]
RequiredThe paths that define the structure of the shape.
- There must be between 1 and 30 paths (inclusive).
- The maximum combined size of all paths must not exceed 2kb.
- The maximum number of unique fill colors across all paths is 6.
d
string
RequiredThe shape of the path.
This is similar to the d
attribute of an SVG's path
element, with some limitations:
- The path must start with an M command.
- The path must not have more than one M command.
- The path must not use the Q command.
- The path must be closed, either by:
- Using a Z command at the end of the path
- Having the last coordinate match the first coordinate
fill
Fill
RequiredThe appearance of the path's interior.
dropTarget
boolean
OptionalIf true
, users can replace a fill by dropping an image or video onto it.
color
string
OptionalThe color of the fill as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
asset
object
OptionalAn image or video to use as the fill.
An image asset that fills a path's interior.
type
string
RequiredThe type of fill.
This must be "image"
.
ref
ImageRef
RequiredA unique identifier that points to an image asset in Canva's backend.
altText
AltText
OptionalA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
A video asset that fills a path's interior.
type
string
RequiredThe type of fill.
This must be "video"
.
ref
VideoRef
RequiredA unique identifier that points to a video asset in Canva's backend.
altText
AltText
OptionalA description of the image content.
Use undefined
for content with no description.
text
string
RequiredThe text content.
decorative
boolean | undefined
RequiredIndicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
stroke
PathStroke
OptionalThe outline of the path.
weight
number
RequiredThe weight (thickness) of the stroke.
Minimum: 0
Maximum: 100
color
string
RequiredThe color of the stroke as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
strokeAlign
string
RequiredThe alignment of the stroke.
This must be "inset"
.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
width
number
RequiredA width, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
height
number
RequiredA height, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
The type has been superseded by GroupElementAtPoint
.
An element that contains two or more elements and has positional properties.
type
string
RequiredThe type of element.
This must be "group"
.
children
GroupContentAtPoint[]
RequiredThe elements to render within the group.
- Each element within a group must have dimensions and a position.
- The dimensions and positions are relative to the dimensions and positions of the group.
top
number
RequiredThe distance from the top edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
left
number
RequiredThe distance from the left edge of the container, in pixels.
- The pixels are relative to their container.
Minimum: -32768
Maximum: 32767
width
number
RequiredA width, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
height
number
RequiredA height, in pixels.
- The pixels are relative to their container.
Minimum: 0
Maximum: 32767
rotation
number
OptionalA rotation, in degrees.
Minimum: -180
Maximum: 180
Returns
Promise<void>