Skip to content

Text ​

Text writing.

Text example

Examples ​

js
// This will override the native Text class !
import { Text } from "pencil.js";

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.

js
import { Text as PText } from "pencil.js";

TextOptions ​

Inherit from ComponentOptions.

NameTypeDefaultComment
fontString"sans-serif"Font to use (can be a URL)
fontSizeNumber20Size of the text in pixels
alignStringText.alignments.startText horizontal alignment (use the origin option to move the text)
boldBooleanfalseUse bold font-weight
italicBooleanfalseUse italic font-style
underscoreBooleanfalseDraw a line under the text
lineHeightNumber1Ratio of line height (1 is normal, 2 is twice the space)

Released under the MIT License.