pencil.js/src/modules/text/readme.md

Nice modular interactive 2D drawing library.

# Text

Text writing.

![Text example](../../../media/examples/text.png)


## 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](../component/readme.md#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) |