Positioning elements

By default, when an app creates an element, the element is:

• Added to the center of the current page
• Scaled to a size that's set by Canva

Apps can, however, override these values.

Setting an element's position

Although the term position implies X and Y coordinates, Canva's APIs uses the term to describe the combination of the following properties:

• width
• height
• top
• left
• rotation

Apps can set the position of both native elements and app elements, but the exact syntax depends on the type of element.

Native elements

The following snippet demonstrates how to position a native element by passing additional properties into the addNativeElement method:

designInteraction.addNativeElement({
  type: "EMBED",
  url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",

  // Position
  width: 640,
  height: 360,
  top: 0,
  left: 0,
  rotation: 0,
});

App elements

The following snippet demonstrates how to position an app element by passing a position into the setAppElementData method as a second argument:

designInteraction.setAppElementData(
  {
    // app element data goes here
  },
  {
    // Position
    width: 640,
    height: 360,
    top: 0,
    left: 0,
    rotation: 0,
  }
);

Using the page's dimensions

Elements must be positioned within the bounds of the current page. To accomplish this, apps can use the width and height of the page to calculate the position of the element.

The following snippet shows how to position an element 100 pixels from the bottom-right corner:

const context = await getCurrentPageContext();

const width = 640;
const height = 360;
const top = context.dimensions.height - height - 100;
const left = context.dimensions.width - width - 100;

designInteraction.addNativeElement({
  type: "EMBED",
  url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",

  // Position
  width,
  height,
  top,
  left,
  rotation: 0,
});

To learn more, see Getting page information.

Maintaining an element's aspect ratio

When an element's width is defined as a number, the height can be set to "auto" (and vice versa). At runtime, Canva replaces "auto" with a value that maintains the aspect ratio of the element.