Layouts and dimensions

The API for editing extensions has multiple objects with dimensions and coordinates, including pages, elements, images, and crop boxes.
This topic explains how the geometry of these objects interact.
Units of measurement
Unless otherwise stated, all units of measurements are in pixels. These pixels are zoom-independent, meaning they don't change as you zoom in or out. This makes them easier to reason about, since you don't have to consider the design's zoom level.
Pages
Canva designs have one or more pages.
A page, also known as the canvas, is where users can add their design elements, such as images, videos, and text.
Pages have a width and a height, which Canva passes to an extension via the onReady callback:
canva.onReady(async (opts) => {
  console.log(opts.page.width);
  console.log(opts.page.height);
});
Pages do not have a position.
Elements
A page of a design can have zero or more elements.
An element is a generic way of referring to the "ingredients" of a design, such as images, videos, and text. At the moment, editing extensions can only edit image-based elements, including JPG, PNG, and SVG files.
When a user opens an extension, Canva passes the element into the onReady callback:
canva.onReady(async (opts) => {
  console.log(opts.element);
});
The API represents elements as the CanvaElement type:
type CanvaElement<
  T extends CanvaMedia | CanvaImageUrl | CanvaImageBlob | undefined
> = {
  type: CanvaDataType.CANVA_ELEMENT;
  data: T;
  layout: CanvaElementLayout;
  fixed: boolean;
};
This is an object that encodes information about how the element appears on a page. It has a layout property, which defines the following properties:
Position - The X and Y coordinates of the element, relative to the top-left corner of the page that it exists on.
Dimensions - The width and height of the element.
Rotation - The rotation of the element, in degrees.
Crop box - The visible section of the element.
The API represents these properties as the CanvaElementLayout type:
type CanvaElementLayout = {
  height: number;
  width: number;
​
  left: number;
  top: number;
  rotation: number;
​
  cropBox: {
    left: number;
    top: number;
    height: number;
    width: number;
  };
};
iframes
Editing extensions run in an iframe. The layout of this iframe is the same as the layout of the element. If an extension or user changes the layout of an element, the layout of the iframe also changes. Practically, they're the same thing.
Images
When a user opens an extension, the element contains three CanvaImageUrl objects:
type CanvaImageUrl = {
  type: CanvaDataType.CANVA_IMAGE_URL;
  url: string;
  imageType: string;
  width: number;
  height: number;
};
Each of these objects point towards an image file of a different resolution (thumbnail, preview, and full).
Typically, extensions use the toCanvas method to download the user's image and convert it into an HTMLCanvasElement:
const canva = window.canva.init();
​
const {
  imageHelpers: { toCanvas },
} = window.canva;
​
canva.onReady(async (opts) => {
  const canvas = await toCanvas(opts.element, { quality: "preview" });
  document.body.appendChild(canvas);
});
This method uses the following CSS to ensure the HTMLCanvasElement is scaled to the same size as the element:
canvas.style.width = "100%";
canvas.style.height = "100%";
Without this CSS, the user's image may stretch beyond the dimensions of the element or not reach the edges of the element. For example, since the default size of an HTMLCanvasElement is 300 × 150, this is what the happens without the CSS properties:
The aspect ratio of the element is always the same as the aspect ratio of the user's image. The only exception is if an extension changes the aspect ratio of the element without changing the aspect ratio of the image, which it shouldn't do.
Crop box
All elements have a crop box. This is a rectangle that defines the visible section of the element. By default, the crop box extends to the edges of the element, so the entire element is visible, but extensions and users can adjust the crop box.
A crop box is a combination of dimensions and position. The position of a crop box is relative to the top-left corner of an element.
Fixed elements
Some elements are said to be fixed.
When an element is fixed, it’s locked into a certain position and can’t be moved. This prevents extensions from changing the element’s layout.
Some examples of fixed elements include:
Backgrounds
Frames
Grids
To see a fixed element in action:
1.Open the Canva editor.
2.Select More > Background.
3.Add a background to the canvas.
4.Try moving the background.
You’ll notice that the background is "stuck" in place.
The CanvaElementLayout object has a fixed property that identifies if the element is fixed or not:
canva.onReady(async (opts) => {
  console.log(opts.element.layout.fixed); // => true
});
When an element is fixed, an extension can't change the size or position of the visible part of the element, relative to the page it's on. However, it can still update the layout of the element.
Updating the width and height of a fixed element's layout changes the size of the underlying iframe. Furthermore, by updating the cropBox, the app can control the section of the iframe that is displayed in the fixed element. This can be thought of as shifting the iframe around, behind the element, in order to control what is visible in the "window" of the element, which cannot be moved.
Example
This example demonstrates the behavior of a fixed element. It only works when running in a fixed element. A "real" extension should check if the element is fixed and handle layout changes differently based on that check.
const {
  imageHelpers: { toCanvaImageBlob, toCanvas, toImageElement },
} = window.canva;
const canva = window.canva.init();
​
const state = {
  element: null,
  image: null,
  canvas: null,
};
​
canva.onReady(async (opts) => {
  if (!opts.element.fixed) {
    throw new Error("This example is only intended to work on fixed elements");
  }
​
  state.element = opts.element;
  state.image = await toCanvaImageBlob(opts.element, { quality: "preview" });
  state.canvas = await toCanvas(state.image);
  document.body.appendChild(state.canvas);
  renderControls();
});
​
canva.onLayoutChange((opts) => {
  if (opts.commit) {
    state.element.layout = opts.layout;
  }
});
​
canva.onControlsEvent((event) => {
  switch (event.message.controlId) {
    case "enlarge":
      enlarge();
      return;
    case "shift_right":
      shift("right");
      return;
    case "shift_left":
      shift("left");
      return;
  }
});
​
canva.onImageUpdate(async (opts) => {
  const img = await toImageElement(opts.image);
  const context = state.canvas.getContext("2d");
  context.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
});
​
canva.onSaveRequest(async () => {
  return toCanvaImageBlob(state.element, {
    quality: "full",
    imageType: state.image.imageType,
  });
});
​
function renderControls() {
  const controls = [
    canva.create("button", { id: "enlarge", label: "Enlarge" }),
    canva.create("button", { id: "shift_right", label: "Shift Right" }),
    canva.create("button", { id: "shift_left", label: "Shift Left" }),
  ];
  canva.updateControlPanel(controls);
}
​
function enlarge() {
  // Create a copy of the layout
  const layout = { ...state.element.layout };
​
  // Dimensions
  layout.width += 50;
  layout.height += 50;
​
  // Position
  layout.top -= 25;
  layout.left -= 25;
​
  // Crop box
  layout.cropBox.left += 25;
  layout.cropBox.top += 25;
  layout.cropBox.width += 50;
  layout.cropBox.height += 50;
​
  // Update the layout
  canva.updateLayout({ layout });
}
​
function shift(direction) {
  // Create a copy of the layout
  const layout = { ...state.element.layout };
​
  if (direction === "right") {
    layout.cropBox.left -= 50;
  }
​
  if (direction === "left") {
    layout.cropBox.left += 50;
  }
​
  // Update the layout
  canva.updateLayout({ layout });
}
Quick start
Image processing
Last modified 8mo ago