Gets the default dimensions that a new page will have when it is added to a design. It is possible for a user to resize a page without resizing the entire design, e.g. by clicking "Expand to Whiteboard". However, there will always be a single set of default dimensions for a design that is applied whenever a new page is created.

Returns undefined if the design is unbounded (e.g. Whiteboard or Doc).

Usage

Get default page dimensions

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

const dimensions = await getDefaultPageDimensions();

if (dimensions) {
  // Do something with the dimensions, e.g. `dimensions.width` and `dimensions.height`
} else {
  // This design type does not have fixed dimensions, e.g. Whiteboard or Doc
}

TYPESCRIPT

Center element using page dimensions

import { getDefaultPageDimensions, addElementAtPoint } from "@canva/design";
import type { ImageElementAtPoint } from "@canva/design";

const dimensions = await getDefaultPageDimensions();

if (dimensions) {
  const elementWidth = 300;
  const elementHeight = 200;

  const element: ImageElementAtPoint = {
    type: 'image',
    dataUrl: 'data:image/png;base64,...',
    altText: { text: 'Centered image', decorative: false },
    top: (dimensions.height - elementHeight) / 2,
    left: (dimensions.width - elementWidth) / 2,
    width: elementWidth,
    height: elementHeight
  };

  await addElementAtPoint(element);
}

TYPESCRIPT

Returns

A Promise that resolves with either undefined or the following object:

widthnumber

A width, in pixels.

heightnumber

A height, in pixels.