onLayoutChange

API reference for the "onLayoutchange" method.

Registers a callback that runs when:

  • The user changes the layout of the element in their design.

  • The extension calls the updateLayout method.

The layout defines:

  • The dimensions of the element.

  • The position of the element (relative to the page).

  • The rotation of the element.

  • The visible section—the crop box—of the element.

In this callback, an extension must modify the user's image to ensure that it renders correctly. For example, if a user rotates the element in their design, the extension may need to modify the effect to account for the rotation.

The layout properties may change individually (for example, the user rotates the element) or as a group (for example, the user rotates and resizes the element as one action).

Usage

const { imageHelpers } = window.canva;
const canva = window.canva.init();
canva.onReady(async (opts) => {
// This callback must exist for the extension to load
});
// Handle layout changes
canva.onLayoutChange(async (opts) => {
console.log(opts.layout);
});

Parameters

Name

Type

Required

Description

handler

LayoutChangeHandler

Yes

The callback that runs when the extension's layout changes.

Returns

void

Types

LayoutChangeHandler

The callback that runs when the extension's layout changes.

Signature

(opts) => void

Parameters

Name

Type

Required

Description

opts

object

Yes

Information about the event.

opts.commit

boolean

Yes

If false, the user is changing the layout. If true, the user has finished changing the layout.

opts.layout

CanvaElementLayout

Yes

The updated layout of the element.

opts.page

object

Yes

The dimensions of the page that contains element.

opts.page.height

number

Yes

The height of the page that contains element, in pixels.

opts.page.width

number

Yes

The width of the page that contains element, in pixels.

Returns

void