getDefaultPageDimensions

API reference for the getDefaultPageDimensions method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

Gets the default dimensions that a new page will have when it's added to a design. To learn more about adding pages to a design, see addPage.

Some types of designs, such as whiteboards⁠(opens in a new tab or window), are unbounded. An unbounded design is one that doesn't have dimensions. In these cases, this method returns undefined.

Usage

import { getDefaultPageDimensions } from "@canva/design";

const defaultPageDimensions = await getDefaultPageDimensions();

// If `undefined`, the design is unbounded
if (!defaultPageDimensions) {
  return;
}

const headerElementWidth = defaultPageDimensions.width * 0.5;
const embedElementWidth = defaultPageDimensions.width * 0.4;

await addPage({
  elements: [
    {
      ...headerElement,
      width: headerElementWidth,
      height: "auto",
      // Shift from the top by 10%
      top: defaultPageDimensions.height * 0.1,
      // Shift it by 50% of the page width, then subtract 50% of the group element width.
      left: defaultPageDimensions.width / 2 - headerElementWidth / 2,
    },
    {
      ...embedElement,
      width: embedElementWidth,
      height: "auto",
      // Shift from the top by 40%
      top: defaultPageDimensions.height * 0.4,
      // Shift it by 50% of the page width, then subtract 50% of the group element width.
      left: defaultPageDimensions.width / 2 - embedElementWidth / 2,
    },
  ],
});

Returns

A Promise that resolves with the following result:

resultobjectOptional

The successful result of getting the default page dimensions, or undefined if the design is unbounded.

result.widthnumberRequired

The width of the page, in pixels.

result.heightnumberRequired

The height of the page, in pixels.