# Text (`Text`) (/start/canvas-text)



The [`Text`](/jsdoc/pixi-vn/index/classes/Text) component extends the [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text) component, so you can use all the methods and properties of [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text). It is used to display text on the canvas.

```ts title="main.ts"
import { canvas, Text } from "@drincs/pixi-vn";

const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });

canvas.add("text", basicText);
```

Compared to the [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text) component, [`Text`](/jsdoc/pixi-vn/index/classes/Text) adds the following features:

* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show text on the canvas is to use the [`showText`](/jsdoc/pixi-vn/index/functions/showText) function.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showText } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            let text = await showText("text", "Hello World!", {
                xAlign: 0.5,
                yAlign: 0.5,
            });
            text.style.fontSize = 30;
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/text-canvas" />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.

## Style [#style]

To style the text, use [`TextStyle`](/jsdoc/pixi-vn/index/variables/TextStyle). This class allows you to customize font family, size, color, stroke, shadow, and more.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { canvas, newLabel, Text, TextStyle } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            const skewStyle = new TextStyle({
                fontFamily: "Arial",
                dropShadow: {
                    alpha: 0.8,
                    angle: 2.1,
                    blur: 4,
                    color: "0x111111",
                    distance: 10,
                },
                fill: "#ffffff",
                stroke: { color: "#004620", width: 12, join: "round" },
                fontSize: 60,
                fontWeight: "lighter",
            });

            const skewText = new Text({
                text: "SKEW IS COOL",
                style: skewStyle,
                align: 0.5,
                skew: { x: 0.65, y: -0.3 },
            });

            canvas.add("text", skewText);
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/text-canvas-style" />