onLayoutChange

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
​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
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
​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

onControlsEvent

onPresetsRequest

Last modified 7mo ago

Copy link

Contents