Area (area)

const area = canvasUI.view.new("area-1", "area")

area.set("size", {
  width: { unit: "px", value: 150 },
  height: { unit: "px", value: 100 },
})

area.set("background", "#f94144")
area.set("border", { size: 10, color: "#e03b3d" })
area.set("corner", { type: "round", size: 10 })

size

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

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

Each of these properties is 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: { unit: "px", value: 100 },
  height: { unit: "px", value: 100 }
}

background

It is the background color of the view. Its default value is:

"#000"

border

It is the border of the view. 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
}