Image Area (imageArea)

const imageArea = canvasUI.composite.new("imageArea-1", "imageArea")

imageArea.set("size", {
  width: { unit: "px", value: 200 },
  height: { unit: "px", value: 200 },
})

imageArea.set("imageSize", { width: 100, height: 100 })
imageArea.set("imageSrc", "/img/logo.svg")

imageArea.set("background", "#F9BC41")
imageArea.set("border", { size: 10, color: "#E0A93B" })
imageArea.set("corner", { type: "round", size: 10 })

size

It is the size of the composite. It is an object with these properties:

• width: Width of the composite.
• height: Height of the composite.

Each of these properties can be "auto" to make the size adapt to the size of its image, and it can also be an object with these properties:

• unit: It is the unit used to define the size, and it can be "px" and "%".
• value: It is the size in terms of the unit specified in the other property.

If the unit is "px" the value will be in px. If it is "%" the value will be the percentage of its maximum available size.

Its default value is:

{
  width: "auto",
  height: "auto"
}

imageSize

It is the size of the image. It is an object with these properties:

• width: Width of the image.
• height: Height of the image.

Its default value is:

{
  width: 100,
  height: 100
}

imageSrc

It is the source of the image. If the source is not defined, the value is "". Its default value is:

""

background

It is the background color of the composite. Its default value is

"rgba(0,0,0,0)"

border

It is the border of the composite. It is an object with these properties:

• size: It is the size of the border.
• color It is the color of the border.

Its default value is:

{
  size: 0,
  color: "#000"
}

corner

It defines how the corners are drawn. It is an object with these properties:

• type: It can be "cut" to define that the corners have to be cut, and it can also be "round" to define that the corners have to be rounded.
• size: It is a number that defines how much the corners will be cut or rounded.

Its default value is:

{
  type: "cut",
  size: 0
}

align

It is used to align the image inside the area. It is an object with these properties:

• horizontal: It defines the horizontal alignment and its values can be "left", "middle" and "right".
• vertical: It defines the vertical alignment and its values can be "top", "middle" and "bottom".

Its default value is:

{
  horizontal: "middle",
  vertical: "middle"
}

margin

It is the margin of the image in its area. It is an object with these properties:

• top: Top margin.
• right: Right margin.
• bottom: Bottom margin.
• left: Left margin.

Its default value is:

{
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}