getDefaultPageDimensions

API reference for the getDefaultPageDimensions method.

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.

Usage

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

(async () => {
  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:

#resultobject

Optional

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

#result.widthnumber

Required

The width of the page, in pixels.

#result.heightnumber

Required

The height of the page, in pixels.