Text Area (textArea)

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

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

textArea.set("text", "Hello World!")
textArea.set("font", {
  family: "Poppins",
  size: 20,
  weight: 700,
})
textArea.set("color", "#FFF")

textArea.set("background", "#f94144")
textArea.set("border", { size: 10, color: "#e03b3d" })
textArea.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 text, 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"
}

text

It is the text that has to draw. Its default value is:

"Text"

font

It is the font of the text. It is an object that has these properties:

• family: It is the font family of the text.
• size: It is the font size of the text.
• weight: It is the font weight of the text.

Its default value is:

{
  family: "Courier New",
  size: 16,
  weight: 400
}

color

It is the color of the text. Its default value is:

"#000"

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 layout. 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 text 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 text 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
}