# Canvas (WebGL/WebGPU) (/start/canvas)
Pixi’VN uses [PixiJS](https://pixijs.com/8.x/guides/basics/what-pixijs-is) for rendering. You can use the Pixi’VN API to add images, text, and animations to the PixiJS canvas (or, more precisely, to the 2D WebGL/WebGPU rendering engine).
PixiJS is the fastest, most lightweight 2D library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL and WebGPU. It is fast, flexible, and easy to use. PixiJS is used in games like [Good Pizza, Great Pizza](https://www.goodpizzagreatpizza.com/) and [The Enchanted Cave 2](https://store.steampowered.com/app/368610/The_Enchanted_Cave_2/).
You can learn more about PixiJS on the [PixiJS website](https://www.pixijs.com/).
Use [#use]
You can use this method with the *ink* syntax. See more here.
To interact with the PixiJS application, you can use the `canvas` element, which acts as a wrapper. With it, you can add the set of components provided by Pixi’VN and start animations.
content/labels/start.label.ts
```ts
import { canvas, Sprite } from "@drincs/pixi-vn"; // [!code focus]
export const startLabel = newLabel("start", [
() => {
let sprite = new Sprite({}); // [!code focus]
canvas.add("sprite", sprite); // [!code focus]
},
]);
```
Other features [#other-features]
In CDN-based environments like CodePen, you cannot install pixi.js, but you will have to use the `@drincs/pixi-vn/pixi.js` submodule.
```ts
import { Graphics } from "@drincs/pixi-vn/pixi.js";
```
If you are using build tools such as Vite.js or similar systems, you can directly install and use the `pixi.js` package.
npm
pnpm
yarn
bun
```bash
npm install pixi.js
```
```bash
pnpm add pixi.js
```
```bash
yarn add pixi.js
```
```bash
bun add pixi.js
```
This is useful when creating UI layers with PixiJS or for creating minigames.
```ts
import { canvas } from "@drincs/pixi-vn";
import { Graphics } from "pixi.js";
const graphic = new Graphics().rect(0, 0, 200, 100).fill(0xff0000);
const container = canvas.addLayer("ui");
container.addChild(graphic);
```
Although not recommended, you can use `canvas.app` to directly access the PixiJS application used by Pixi’VN.
```ts
import { canvas } from "@drincs/pixi-vn";
import { Graphics } from "pixi.js";
const graphic = new Graphics().rect(0, 0, 200, 100).fill(0xff0000);
canvas.app.stage.addChild(graphic);
```
Rendering in Pixi’VN is very similar to PixiJS, with the following differences:
* All components added to the canvas are linked to an alias of your choice. This alias is used to identify and manipulate the component.
* Pixi’VN saves the current canvas state at each `step`.
**Note:** Only components linked to an alias are saved. If you add components directly to `PixiJS.Application`, they will not be included in the saved state.
* Pixi’VN provides various functions to add, remove, find, and manipulate components in the canvas.
* Pixi’VN offers custom components, some of which correspond to PixiJS components, while others add new features.
* Tickers are managed by Pixi’VN. If you use a PixiJS ticker, its state will not be saved.
* To add event listeners and save their state in saves, it is recommended to read here.
[**PixiJS DevTools**](https://pixijs.io/devtools/) is a [Chrome extension](https://chromewebstore.google.com/detail/pixijs-devtools/dlkffcaaoccbofklocbjcmppahjjboce) that allows you to inspect and debug PixiJS applications. You can use it to view the display list, inspect textures, and debug your PixiJS application. PixiJS DevTools works with Pixi’VN, allowing you to inspect the canvas.
After installing PixiJS DevTools, open Chrome DevTools (F12) and go to the `PixiJS` tab.
PixiJS supports various rendering backends, including WebGL and WebGPU. Pixi’VN detects the best available renderer for the user's device and uses it by default. However, you can specify a preferred renderer in the `Game.init` method.
For example:
```ts
Game.init({
// ...
preference: "webgpu",
});
```
To handle errors related to the canvas, you can use the `drawCanvasErrorHandler` handler provided by Pixi’VN. This handler will draw an error message on the canvas when an error linked to the canvas component occurs. You can use it in the `Game.addOnError` function.
```ts title="main.ts"
import { Game, drawCanvasErrorHandler } from "@drincs/pixi-vn";
Game.addOnError(drawCanvasErrorHandler());
```
It is possible to pause the main layer used for the game by using the `canvas.pause()` function. This will pause all animations and tickers associated with the canvas. To resume execution, you can use `canvas.resume()`.
The pause state of the canvas is not saved in game saves, so if the canvas is paused when a save is created, it will resume execution when the save is loaded.
This function is useful for pausing the canvas while displaying settings or other menus, and not for creating pause effects during gameplay.