addNativeElement

API reference for the addNativeElement method.

Adds a native element to the user's design.

Parameters

#elementobject

Required

The element to add to the user's design.

An element that's natively supported by the Canva editor.

The type has been superseded by ImageElement.

An element that renders image content.

#altTextAltText

Optional

A description of the image content.

Properties of altText

#decorativeboolean

Optional

Indicates 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.

#textstring

Required

The text content.

#typestring

Required

The type of element.

This must be "image".

#dataUrlstring

Optional

A data URL that contains the image data.

#refImageRef

Optional

A 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.

#altTextAltText

Optional

A description of the video content.

Properties of altText

#decorativeboolean

Optional

Indicates 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.

#textstring

Required

The text content.

#refVideoRef

Required

A unique identifier that points to a video asset in Canva's backend.

#typestring

Required

The type of element.

This must be "video".

The type has been superseded by TextElement.

An element that renders text content.

#childrenstring[]

Required

The text content.

Only the first element in this array is used.

#typestring

Required

The type of element.

This must be "text".

#colorstring

Optional

The color of the text as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

"#ff0099"

#decorationstring

Optional

The decoration of the font.

Default Value: "none"

The available options include:

"none"
"underline"

#fontRefFontRef

Optional

A unique identifier that points to a font asset in Canva's backend.

#fontSizenumber

Optional

The size of the text.

Minimum: 1
Maximum: 100

Default Value: 16

#fontStylestring

Optional

The style of the font.

Default Value: "normal"

The available options include:

"normal"
"italic"

#fontWeightFontWeight

Optional

The weight (thickness) of the font.

Default Value: "normal"

The available options include:

"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"

#textAlignstring

Optional

The alignment of the text.

Default Value: "start"

The available options include:

"start"
"center"
"end"
"justify"

The type has been superseded by ShapeElement.

An element that renders a vector shape.

#pathsShapePath[]

Required

The 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.

Properties of paths

#dstring

Required

The 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

#fillFill

Required

The appearance of the path's interior.

Properties of fill

#assetobject

Optional

An image or video to use as the fill.

An image asset that fills a path's interior.

#refImageRef

Required

A unique identifier that points to an image asset in Canva's backend.

#typestring

Required

The type of fill.

This must be "image".

#colorstring

Optional

The color of the fill as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

" #ff0099"

#dropTargetboolean

Optional

If true, users can replace a fill by dropping an image or video onto it.

#strokePathStroke

Optional

The outline of the path.

Properties of stroke

#colorstring

Required

The color of the stroke as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

"#ff0099"

#strokeAlignstring

Required

The alignment of the stroke.

This must be "inset".

#weightnumber

Required

The weight (thickness) of the stroke.

Minimum: 0
Maximum: 100

#typestring

Required

The type of element.

This must be "shape".

#viewBoxShapeViewBox

Required

Options for configuring the scale and cropping of the shape.

Properties of viewBox

#heightnumber

Required

The height of the view box, in pixels.

#leftnumber

Required

The distance of the shape from the left edge of the element, in pixels.

#topnumber

Required

The distance of the shape from the top edge of the element, in pixels.

#widthnumber

Required

The width of the view box, in pixels.

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.

#altTextAltText

Optional

A description of the image content.

Properties of altText

#decorativeboolean

Optional

Indicates 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.

#textstring

Required

The text content.

#typestring

Required

The type of element.

This must be "image".

#dataUrlstring

Optional

A data URL that contains the image data.

#refImageRef

Optional

A unique identifier that points to an image asset in Canva's backend.

#leftnumber

Required

The distance from the left edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#rotationnumber

Optional

A rotation, in degrees.

Minimum: -180
Maximum: 180

#heightnumber

Required

A height, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

#widthnumber

Required

A width, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

The type has been superseded by VideoElementAtPoint.

An element that renders video content and has positional properties.

#altTextAltText

Optional

A description of the video content.

Properties of altText

#decorativeboolean

Optional

Indicates 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.

#textstring

Required

The text content.

#refVideoRef

Required

A unique identifier that points to a video asset in Canva's backend.

#typestring

Required

The type of element.

This must be "video".

#leftnumber

Required

The distance from the left edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#rotationnumber

Optional

A rotation, in degrees.

Minimum: -180
Maximum: 180

#heightnumber

Required

A height, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

#widthnumber

Required

A width, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

The type has been superseded by EmbedElementAtPoint.

An element that renders rich media, such as a YouTube video, and has positional properties.

#typestring

Required

The type of element.

This must be "embed".

#urlstring

Required

The URL of the rich media.

This URL must be supported by the Iframely API.

#leftnumber

Required

The distance from the left edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#rotationnumber

Optional

A rotation, in degrees.

Minimum: -180
Maximum: 180

#heightnumber

Required

A height, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

#widthnumber

Required

A width, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

The type has been superseded by TextElementAtPoint.

An element that renders text content and has positional properties.

#children[string]

Required

The text content.

Only the first element in this array is used.

#leftnumber

Required

The distance from the left edge of the container, in pixels.

Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

Minimum: -32768
Maximum: 32767

#typestring

Required

The type of element.

This must be "text".

#rotationnumber

Optional

The rotation of the element, in degrees.

Minimum: -180
Maximum: 180

#widthnumber

Optional

The width of the element, in pixels.

Minimum: 0
Maximum: 32767

#colorstring

Optional

The color of the text as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

"#ff0099"

#decorationstring

Optional

The decoration of the font.

Default Value: "none"

The available options include:

"none"
"underline"

#fontRefFontRef

Optional

A unique identifier that points to a font asset in Canva's backend.

#fontSizenumber

Optional

The size of the text.

Minimum: 1
Maximum: 100

Default Value: 16

#fontStylestring

Optional

The style of the font.

Default Value: "normal"

The available options include:

"normal"
"italic"

#fontWeightFontWeight

Optional

The weight (thickness) of the font.

Default Value: "normal"

The available options include:

"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"

#textAlignstring

Optional

The alignment of the text.

Default Value: "start"

The available options include:

"start"
"center"
"end"
"justify"

The type has been superseded by ShapeElementAtPoint.

An element that renders a vector shape and has positional properties.

#pathsShapePath[]

Required

The 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.

Properties of paths

#dstring

Required

The 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

#fillFill

Required

The appearance of the path's interior.

Properties of fill

#assetobject

Optional

An image or video to use as the fill.

An image asset that fills a path's interior.

#refImageRef

Required

A unique identifier that points to an image asset in Canva's backend.

#typestring

Required

The type of fill.

This must be "image".

#colorstring

Optional

The color of the fill as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

" #ff0099"

#dropTargetboolean

Optional

If true, users can replace a fill by dropping an image or video onto it.

#strokePathStroke

Optional

The outline of the path.

Properties of stroke

#colorstring

Required

The color of the stroke as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

"#ff0099"

#strokeAlignstring

Required

The alignment of the stroke.

This must be "inset".

#weightnumber

Required

The weight (thickness) of the stroke.

Minimum: 0
Maximum: 100

#typestring

Required

The type of element.

This must be "shape".

#viewBoxShapeViewBox

Required

Options for configuring the scale and cropping of a shape.

Properties of viewBox

#heightnumber

Required

The height of the view box, in pixels.

#leftnumber

Required

The distance of the shape from the left edge of the element, in pixels.

#topnumber

Required

The distance of the shape from the top edge of the element, in pixels.

#widthnumber

Required

The width of the view box, in pixels.

#leftnumber

Required

The distance from the left edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#rotationnumber

Optional

A rotation, in degrees.

Minimum: -180
Maximum: 180

#heightnumber

Required

A height, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

#widthnumber

Required

A width, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

The type has been superseded by GroupElementAtPoint.

An element that contains two or more elements and has positional properties.

#childrenNativeSimpleElementWithBox[]

Required

The 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.

#typestring

Required

The type of element.

This must be "group".

#leftnumber

Required

The distance from the left edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#topnumber

Required

The distance from the top edge of the container, in pixels.

The pixels are relative to their container.
Minimum: -32768
Maximum: 32767

#rotationnumber

Optional

A rotation, in degrees.

Minimum: -180
Maximum: 180

#heightnumber

Required

A height, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

#widthnumber

Required

A width, in pixels.

The pixels are relative to their container.
Minimum: 0
Maximum: 32767

Returns

Promise<void>