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 refers to the combination of:
  • The dimensions of the element
  • The position of the element, relative to the page
  • The rotation of the element
  • The visible section of the element (also known as the crop box)
In this callback, an extension must update the user’s image to ensure that it renders correctly. For example, if the user rotates the element in their design, the extension may need to modify the effect applied to the image to account for the rotation.
The layout’s properties may change individually—for example, the user rotates the element—or at the same time—for example, the user rotates and resizes the element as one action.
Canva’s built-in zoom slider does not trigger the onLayoutChange callback. To account for this, add the object-fit CSS property to the user’s image and set the value to contain. This ensures that the image smoothly within its container.

Usage

1
const { imageHelpers } = window.canva;
2
const canva = window.canva.init();
3
4
canva.onReady(async (opts) => {
5
// This callback must exist for the extension to load
6
});
7
8
// Handle layout changes
9
canva.onLayoutChange(async (opts) => {
10
console.log(opts.layout);
11
});
Copied!

Parameters

Name
Type
Required
Description
handler
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
1
(opts) => void
Copied!
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
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
Last modified 27d ago