Skip to main content

Text Block

Text blocks comes with repsonsibilty features like wrap option for wrapping text, or can be editable insdie native canvas without using any additional html input tag.

We're gonna creat a text with custom font familiy with font size 80px.

new TextBlock("Hello World", {width: 120, height: 60, fontFamily: "KulminoituvaRegular", color: "blue", fontSize: "80px"})

Wrap​

Text block responsive to any width, height change you can either wrap it for letters or words.

new TextBlock("Hello World", {...options, wrap: "letter" || "word" || "nowrap" })

As you can see in above example how word, letter and nowrap wrap options behave in text block.

Resizable Height​

Default text adjusts height to height of the text block. You can change this behavier by making resizeLineHeight option true.

new TextBlock("Hello World", {...options, resizeLineHeight: true })

Editable​

Editable event takes care of the all text editing, additionally you can listen this change by onEdit option.

const textBlock = new TextBlock("Hello World", {...options, editable: true, onEdit: callbackEdit })

const callbackEdit = (e) => {
    console.log(textBlock.text())
}

Stroke​

You can customize stroke of text with strokeWidth, strokeColor etc. options.

new TextBlock("Hello World", {...options, strokeWidth: 3, strokeColor: "blue" })

More customization​

Addtionally you can use canvas context provided featurs for text in text block. See Shape block api for more information.

new TextBlock("Hello World", {...options, fontKerning: "normal", textRendering: "optimizeLegibility", fontStretch: "expanded" })