On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.

getDefaultPageDimensions

API reference for the getDefaultPageDimensions method.
This version of the API is a preview. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

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.