CanvaElementLayout

This feature is coming soon.
Represents the layout of the iframe that contains the user's image.
The layout defines:
The dimensions of the iframe.
The position of the iframe (relative to the page).
The rotation of the iframe.
The visible section of the user's image.
Signature
type CanvaElementLayout = {
  height: number;
  width: number;
​
  left: number;
  top: number;
  rotation: number;
​
  cropBox: {
    left: number;
    top: number;
    height: number;
    width: number;
  };
};
Properties
The pixels in these properties are zoom-independent units. This means, if the user changes the zoom level of the document, the pixel values don't change.
Name
Type
Required
Description
height
number
Yes
The height of the iframe, in pixels. This does not necessarily equal the height of the user's image.
width
number
Yes
The width of the iframe, in pixels. This does not necessarily equal the width of the user's image.
left
number
Yes
The distance between the leftmost edge of the page and the iframe, in pixels.
top
number
Yes
The distance between the topmost edge of the page and the iframe, in pixels.
rotation
number
Yes
The rotation of the iframe, in degrees.
cropBox
object
Yes
The visible section of the user's image.
cropBox.left
number
Yes
The distance between the leftmost edge of the iframe and the start of the visible section, in pixels.
cropBox.top
number
Yes
The distance between the topmost edge of the iframe and the start of the visible section, in pixels.
cropBox.height
number
Yes
The height of the visible section, in pixels.
cropBox.width
number
Yes
The width of the visible section, in pixels.

Client API - Previous

CanvaElement

Next - Client API

CanvaImageBlob

Last updated 1 month ago

Name	Type	Required	Description
`height`	number	Yes	The height of the iframe, in pixels. This does not necessarily equal the height of the user's image.
`width`	number	Yes	The width of the iframe, in pixels. This does not necessarily equal the width of the user's image.
`left`	number	Yes	The distance between the leftmost edge of the page and the iframe, in pixels.
`top`	number	Yes	The distance between the topmost edge of the page and the iframe, in pixels.
`rotation`	number	Yes	The rotation of the iframe, in degrees.
`cropBox`	object	Yes	The visible section of the user's image.
`cropBox.left`	number	Yes	The distance between the leftmost edge of the iframe and the start of the visible section, in pixels.
`cropBox.top`	number	Yes	The distance between the topmost edge of the iframe and the start of the visible section, in pixels.
`cropBox.height`	number	Yes	The height of the visible section, in pixels.
`cropBox.width`	number	Yes	The width of the visible section, in pixels.