# Components functions (/start/canvas-functions)





Add [#add]

To add a component to the game canvas, you can use `canvas.add`.
This function has the following parameters:

* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component.
* `component`: The component to add.

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

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

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

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<AddCanvasComponents />

Get [#get]

To get a component from the game canvas, you can use `canvas.find`. If the component does not exist, it will return `undefined`.
This function has the following parameters:

* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component.

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

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

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

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite);
        },
        () => {
            const sprite = canvas.find("sprite"); // [!code focus]
            if (sprite) {
                sprite.x = 100;
                sprite.y = 100;
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<GetCanvasComponents />

Remove [#remove]

To remove a component from the game canvas, you can use `canvas.remove`.
This function has the following parameters:

* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component.

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

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

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

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite);
        },
        () => {
            canvas.remove("sprite"); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<RemoveCanvasComponents />

Remove all [#remove-all]

To remove all components from the game canvas, you can use `canvas.removeAll`.

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

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

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

    export const startLabel = newLabel("start", [
        async () => {
            const texture = await Assets.load("egg_head");
            for (let i = 0; i < 3; i++) {
                const sprite = new Sprite();
                sprite.texture = texture;
                sprite.x = i * 150;
                canvas.add(`sprite${i}`, sprite);
            }
        },
        () => {
            canvas.removeAll(); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<RemoveAllCanvasComponents />

Add a listener to an event [#add-a-listener-to-an-event]

<Callout type="info">
  If possible, try using <DynamicLink href="/start/interface">HTML and PixiJS UI</DynamicLink> to add buttons or other elements with events.
</Callout>

In Pixi’VN, compared to PixiJS, you can use a [listener with the `on` method](https://pixijs.com/8.x/examples/events/click) (for example to make it clickable), but if you don't use the `@eventDecorator` decorator, the event will not be registered in the Pixi’VN event system, so if you load a save where that event was used, it will be lost.

`@eventDecorator` is a decorator that saves the event in memory (<DynamicLink href="/faq#enable-typescript-decorators">How to enable decorators in TypeScript?</DynamicLink>). This function has the following parameters:

* `name`: The id used by Pixi’VN to refer to this function (must be unique). If you don't pass the id, the function name will be used as the id.

<CodeBlockTabs defaultValue="canvas/events.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="canvas/events.ts">
      canvas/events.ts
    </CodeBlockTabsTrigger>

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

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="canvas/events.ts">
    ```ts
    import { eventDecorator, FederatedEvent, Sprite } from "@drincs/pixi-vn";

    export default class Events {
        @eventDecorator()
        static buttonEvent(event: FederatedEvent, sprite: Sprite): void {
            switch (event.type) {
                case "pointerdown":
                    sprite.scale.x *= 1.25;
                    sprite.scale.y *= 1.25;
                    break;
            }
        }
    }
    ```
  </CodeBlockTab>

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

    export const startLabel = newLabel("start", [
        async () => {
            const bunny = await showImage("bunny", "bunny", {
                align: 0.5,
                anchor: 0.5,
            });
            // Opt-in to interactivity
            bunny.eventMode = "static";
            // Shows hand cursor
            bunny.cursor = "pointer";
            // Pointers normalize touch and mouse (good for mobile and desktop)
            bunny.on("pointerdown", Events.buttonEvent);
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    { alias: "bunny", src: "https://pixijs.com/assets/bunny.png" },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<AddListenerGivenEvent />

<Comments>
  TODO ### access to PIXI.Application
</Comments>