@pencil.js/text

Text

Text writing.

Installation

npm install @pencil.js/text

Examples

import Text from "@pencil.js/text";

const position = [100, 200];
const options = {
    font: "comic-sans",
    fontSize: 42
};
const message = new Text(position, "Hellow 😺", options);

// Change the text
message.text = "Henlo 🐶";

// Can be use to preload a bunch of fonts
Text.load([url1, url2, url3]).then(() => {
    console.log("Fonts ready");
});

Be aware this example overrides Javascript's Text global. Prefer another name for the import if you have collision.

import PText from "@pencil.js/text";

TextOptions

Inherit from ComponentOptions.

Name	Type	Default	Comment
font	String	"sans-serif"	Font to use (can be a URL)
fontSize	Number	20	Size of the text in pixels
align	String	Text.alignments.start	Text horizontal alignment (use the origin option to move the text)
bold	Boolean	false	Use bold font-weight
italic	Boolean	false	Use italic font-style
underscore	Boolean	false	Draw a line under the text
lineHeight	Number	1	Ratio of line height (1 is normal, 2 is twice the space)