# Canvas (WebGL/WebGPU) (/ink/canvas)



The ***ink* + Pixi’VN integration** introduces a "# script" that allows you to show, edit, remove, and animate a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink>.

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/index.ts">
      src/assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # show image eggHead x 20 y 20
    # show image flowerTop x 220 y 20 with dissolve
    # show image helmlok x 20 y 220 with movein
    # show image skully x 220 y 220 with zoomin
    # pause
    # move eggHead x 300 y 0
    # rotate flowerTop
    # edit image helmlok alpha 0.5
    # shake skully
    # pause
    # remove image eggHead
    # remove image flowerTop with dissolve duration 2
    # remove image helmlok with moveout
    # remove image skully with zoomout
    # pause
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/index.ts">
    ```ts
    import generatedManifestJson from "@/assets/manifest.gen.json";
    import type { AssetsManifest } from "@drincs/pixi-vn";

    export const manifest: AssetsManifest = {
        bundles: [
            ...generatedManifestJson.bundles,
            {
                name: "start",
                assets: [
                    {
                        alias: "eggHead",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                    {
                        alias: "flowerTop",
                        src: "https://pixijs.com/assets/flowerTop.png",
                    },
                    {
                        alias: "helmlok",
                        src: "https://pixijs.com/assets/helmlok.png",
                    },
                    {
                        alias: "skully",
                        src: "https://pixijs.com/assets/skully.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="ink/canvas/basic" />

## Components functions [#components-functions]

### Show [#show]

You can use the `show` to <DynamicLink href="/start/canvas-image#show">show</DynamicLink> a canvas component in **_ink_**. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # show image eggHead
    # show image "eggHead 2" eggHead xAlign 1 yAlign 1
    # show image flowerTop xAlign 0 yAlign 1 visible true cursor "pointer" alpha 0.5
    # show video my_video xAlign 1 yAlign 0
    # show text hello "Hello, this is a text" xAlign 0.5 yAlign 0.5 style \\\{ "fill": "red", "fontSize": 30 \\\}
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # show <component type> <alias> [<source>] [<parameters>]

    where:
        component type = the component type to show. Available types: `image`, `video`, `text`.
        alias = the alias to identify the component. Use double quotes if it contains spaces.
        source (Optional) = the alias or URL of the asset to use as the texture source. If not set, `alias` will be used as the source.
        parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Available `parameters` (all optional) are the properties of [`PixiVNJsonCanvasImageVideoShowProps`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonCanvasImageVideoShowProps#properties) or [`PixiVNJsonCanvasTextShowProps`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonCanvasTextShowProps#properties).

<Accordions>
  <Accordion title="Example" id="example">
    <PixiVnExample path="ink/canvas/show-component" />
  </Accordion>

  <Accordion title="Show container" id="show-imagecontainer">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        # show imagecontainer james [m01-body m01-eyes m01-mouth] xAlign 0.5 yAlign 1
        # show imagecontainer sly [fm01-body fm01-eyes fm01-mouth] xAlign 0.2 yAlign 1 with movein
        # show imagecontainer steph [fm02-body fm02-eyes fm02-mouth] xAlign 0.8 yAlign 1 with dissolve
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # show imagecontainer <alias> [<source>] [<parameters>]

        where:
            alias = the alias to identify the component. Use double quotes if it contains spaces.
            source (Optional) = a list of texture aliases/URLs (e.g. `[url1 url2 url3]`). If not set, `alias` will be used as the source.
            parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Available `parameters` (all optional) are the properties of [`PixiVNJsonCanvasImageContainerShowProps`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonCanvasImageContainerShowProps#properties).

    <PixiVnExample path="ink/canvas/show-container" />
  </Accordion>

  <Accordion title="Show with transition" id="show-with-transition">
    If you want to show the canvas component with a <DynamicLink href="/start/canvas-transition">transition</DynamicLink>, you can add into the parameters the `with {transition type}`.

    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        # show eggHead with dissolve duration 3
        temp durationVar = 3
        # show eggHead eggHead2 with fade duration {durationVar}
        # show flowerTop x 20 y 30 with movein direction left
        # show helmlok x 20 y 30 with zoomin
        # show skully x 20 y 30 with pushin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # show <component type> <alias> [<source>] [<parameters>] with <transition type> [<transition parameters>]

        where:
            component type = the component type to show. Available types: `image`, `imagecontainer`, `video`, `text`.
            alias = the alias to identify the component. Use double quotes if it contains spaces.
            source (Optional) = the alias or URL of the asset to use as the texture source. If not set, `alias` will be used as the source.
            parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
            transition type = the transition to use. Available types: `dissolve`, `fade`, `movein`, `zoomin`, `pushin`.
            transition parameters (Optional) = a space-separated list of property/value pairs corresponding to the transition options. If a value is a string and includes spaces, you must use double quotes.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Available `transition parameters` (all optional) are the properties of [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonMediaTransiotions), and vary depending on the `transition type` used:

    * `dissolve`: properties of [`ShowWithDissolveTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps#properties).
    * `fade`: properties of [`ShowWithFadeTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps#properties).
    * `movein`: properties of [`MoveInOutProps`](/jsdoc/pixi-vn/index/interfaces/MoveInOutProps#properties).
    * `pushin`: properties of [`PushInOutProps`](/jsdoc/pixi-vn/index/interfaces/PushInOutProps#properties).
    * `zoomin`: properties of [`ZoomInOutProps`](/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps#properties).
  </Accordion>
</Accordions>

### Edit [#edit]

You can use the `edit` to edit a canvas component in **_ink_**. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # edit image bg position \{ "x": 20, "y": 30 \} visible true cursor "pointer" alpha 0.5
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # edit <component type> <alias> [<parameters>]

    where:
        component type = the component type to edit. Available types: `image`, `imagecontainer`, `video`, `text`,  `canvaselement`.
        alias = the alias to identify the component. Use double quotes if it contains spaces.
        parameters (Optional) = a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is an object, pass valid JSON and escape the braces for ink.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Available `parameters` (all optional) vary by component:

* `image`: properties of [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#properties).
* `video`: properties of [`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory#properties).
* `imagecontainer`: properties of [`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#properties).
* `text`: properties of [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory#properties).

### Remove [#remove]

You can use the `remove` to <DynamicLink href="/start/canvas-image#remove">remove</DynamicLink>  a canvas componentin **_ink_**. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # remove image bg
    # remove image "bg 2"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # remove <component type> <alias>

    where:
        component type = the component type to remove. Available types: `image`, `imagecontainer`, `video`, `text`.
        alias = the alias to identify the component. Use double quotes if it contains spaces.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Remove with transition" id="remove-with-transition">
    If you want to remove the canvas component with a <DynamicLink href="/start/canvas-transition">transition</DynamicLink>, you can add after the alias of the canvas component `with {transition type}`.

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        # remove image bg with dissolve duration 3
        temp durationVar = 3
        # remove image bg with fade duration {durationVar}
        # remove image bg with moveout
        # remove image bg with zoomout
        # remove image bg with pushout
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # remove <component type> <alias> with <transition type> [<transition parameters>]

        where:
            component type = the component type to remove. Available types: `image`, `imagecontainer`, `video`, `text`.
            alias = the alias to identify the component. Use double quotes if it contains spaces.
            transition type = the transition to use. Available types: `dissolve`, `fade`, `moveout`, `zoomout`, `pushout`.
            transition parameters (Optional) = a space-separated list of property/value pairs corresponding to the transition options. If a value is a string and includes spaces, you must use double quotes.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Available `transition parameters` (all optional) are the properties of [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonMediaTransiotions), and vary depending on the `transition type` used:

    * `dissolve`: properties of [`ShowWithDissolveTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps#properties).
    * `fade`: properties of [`ShowWithFadeTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps#properties).
    * `movein`: properties of [`MoveInOutProps`](/jsdoc/pixi-vn/index/interfaces/MoveInOutProps#properties).
    * `pushin`: properties of [`PushInOutProps`](/jsdoc/pixi-vn/index/interfaces/PushInOutProps#properties).
    * `zoomin`: properties of [`ZoomInOutProps`](/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps#properties).
  </Accordion>
</Accordions>

### Pause and resume [#pause-and-resume]

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # show video my_video
    Video started
    # pause video my_video
    Video
    Video paused
    # resume video my_video
    Video resumed
    -> DONE
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Pause" id="pause">
    To pause a video in **_ink_**, you can use `pause`. To do this, you need to use the following syntax:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        # pause video bg
        # pause video "bg 2"
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # pause video <alias>

        where:
            alias = the alias to identify the video to pause. Use double quotes if it contains spaces.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Resume" id="resume">
    To resume a video in **_ink_**, you can use `resume`. To do this, you need to use the following syntax:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        # resume video bg
        # resume video "bg 2"
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # resume video <alias>

        where:
            alias = the alias to identify the video to resume. Use double quotes if it contains spaces.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Animate [#animate]

You can use the `animate` to use the <DynamicLink href="/start/canvas-motion">animations</DynamicLink> in **_ink_**. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # animate alien angle 360 options duration 1
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # animate <alias> <keyframes> options <parameters>

    where:
        alias = the alias to identify the component. Use double quotes if it contains spaces.
        keyframes = a space-separated list of property/value pairs representing the properties to animate and the values to reach. If a value contains spaces, wrap it in double quotes. If a value is an object, pass valid JSON and escape the braces for ink.
        parameters (Optional) = a space-separated list of property/value pairs corresponding to the `options` parameter of the motion library. If a value contains spaces, wrap it in double quotes. If a value is an object, pass valid JSON and escape the braces for ink.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

The `keyframes` define the **target state** you want the component's properties to reach (e.g. a position, scale, or opacity), while `parameters` define **how** to get there (e.g. duration, easing).

Available `keyframes` vary by component:

* `image`: properties of [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#properties).
* `video`: properties of [`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory#properties).
* `imagecontainer`: properties of [`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#properties).
* `text`: properties of [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory#properties).

Available `parameters` (all Optional) can include all the [`motion` options](https://motion.dev/docs/animate#options) and additional parameters you would use in JS/TS. You can find all the `parameters` in detail in [`PixiVNJsonAnimateBaseOptions`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonAnimateBaseOptions#properties).

Here are some examples:

<Accordions>
  <Accordion title="Move" id="move">
    ```ink title="ink/start.ink"
    === start ===
    # show image alien
    # animate alien xAlign 1 yAlign 0 options ease "easeOut"
    # pause
    # animate alien xAlign 1 yAlign 1 options ease "backOut"
    # pause
    # animate alien xAlign 0 yAlign 1 options ease "circIn"
    # pause
    # animate alien xAlign 0 yAlign 0 options ease "linear"
    # pause
    -> DONE
    ```
  </Accordion>

  <Accordion title="Rotate" id="rotate">
    ```ink title="ink/start.ink"
    === start ===
    # show alien
    # animate alien angle 360 options duration 1 type "spring" repeat Infinity repeatDelay 0.2
    # pause
    -> DONE
    ```
  </Accordion>

  <Accordion title="Fade" id="fade">
    ```ink title="ink/start.ink"
    === start ===
    # show alien
    # animate alien alpha 0 options ease "linear" duration 1
    # pause
    -> DONE
    ```
  </Accordion>

  <Accordion title="Zoom" id="zoom">
    ```ink title="ink/start.ink"
    === start ===
    # show alien
    # animate alien scaleX 0 scaleY 0 options ease "circInOut" duration 1
    # pause
    -> DONE
    ```
  </Accordion>

  <Accordion title="Mirror" id="mirror">
    ```ink title="ink/start.ink"
    === start ===
    # show alien
    # animate alien scaleX -1 options duration 1
    # pause
    # animate alien scaleX 1 options duration 1
    # pause
    -> DONE
    ```
  </Accordion>
</Accordions>

### Articulated animations [#articulated-animations]

Articulated animations are functions that use the [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) function under the hood to create animations that involve multiple steps, such as shaking, bouncing, or other complex effects. You can trigger them in **_ink_** using a dedicated hashtag command for each effect.

<Accordions>
  <Accordion title="Shake" id="shake">
    You can use the `shake` command to apply the [`effects.shakeEffect`](/jsdoc/pixi-vn/index/namespaces/effects/functions/shakeEffect) to a canvas component. To do this, you need to use the following syntax:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        # shake bg
        # shake "bg 2"
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        # shake <alias> [<parameters>]

        where:
            alias = the alias to identify the component to shake. Use double quotes if it contains spaces.
            parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Available `parameters` (all optional) are the properties of [`ShakeEffectProps`](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#properties).
  </Accordion>
</Accordions>