PixiJS

https://pixijs.com/8.x/
Admin
PixiJS is an advanced, open-source 2D rendering engine built on WebGL and WebGPU, designed for...
Tokens:82,790
Snippets:767
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Adapter setup old vs new

Source: https://pixijs.com/8.x/guides/migrations/v8

Shows the deprecated settings.ADAPTER usage and the new DOMAdapter.set/get approach for setting the adapter.

```ts
import { settings, WebWorkerAdapter } from 'pixi.js';

settings.ADAPTER = WebWorkerAdapter;
settings.ADAPTER.createCanvas();
```

```ts
import { DOMAdapter, WebWorkerAdapter } from 'pixi.js';

DOMAdapter.set(WebWorkerAdapter);
DOMAdapter.get().createCanvas();
```

--------------------------------

### Point example

Source: https://pixijs.com/8.x/guides/components/math

Creates a Point and sets its coordinates.

```ts
import { Point } from 'pixi.js';
const point = new Point(5, 10);

point.set(20, 30); // set x and y
```

--------------------------------

### Initialize Application with ResizePlugin

Source: https://pixijs.com/8.x/guides/components/application/resize-plugin

Creates a PixiJS Application and initializes it with a width, height, and resizeTo target (window). The ResizePlugin is installed automatically by default.

```ts
import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  resizeTo: window,
});
```

--------------------------------

### Load SVG as Sprite Texture (Full Example)

Source: https://pixijs.com/8.x/guides/components/assets/svg

Loads an SVG as a texture and creates a Sprite. The example initializes an app, loads the SVG, centers it, and animates rotation and scale.

```ts
// description: This example demonstrates loading a large SVG texture and displaying it as a sprite
import { Application, Assets, Sprite } from 'pixi.js';

(async () => {
  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({ antialias: true, resizeTo: window });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  const tigerTexture = await Assets.load({
    src: 'https://pixijs.com/assets/tiger.svg',
  });

  const sprite = new Sprite(tigerTexture);

  // line it up as this svg is not centered
  const bounds = sprite.getLocalBounds();

  sprite.pivot.set(
    (bounds.x + bounds.width) / 2,
    (bounds.y + bounds.height) / 2,
  );

  sprite.position.set(app.screen.width / 2, app.screen.height / 2);

  app.stage.addChild(sprite);

  app.ticker.add(() => {
    sprite.rotation += 0.01;
    sprite.scale.set(2 + Math.sin(sprite.rotation));
  });
})();
```

--------------------------------

### Switch from InteractionManager to EventSystem

Source: https://pixijs.com/8.x/guides/migrations/v7

Shows how to uninstall the InteractionManager and install the EventSystem from @pixi/events. This is a suggested preparatory step before upgrading to v7.

```javascript
import { InteractionManager, extensions, Application } from 'pixi.js';  

import { EventSystem } from '@pixi/events';  

  

// Uninstall interaction  

extensions.remove(InteractionManager);  

  

// Create the renderer or application  

const app = new Application();  

  

// Install events  

app.renderer.addSystem(EventSystem, 'events');  

```

--------------------------------

### Create and start a Ticker

Source: https://pixijs.com/8.x/guides/components/ticker

Creates a new Ticker instance and adds a callback that logs the deltaTime on every frame, then starts the ticker.

```ts
import { Ticker } from 'pixi.js';

const ticker = new Ticker();

ticker.add((ticker) => {
  console.log(`Delta Time: ${ticker.deltaTime}`);
});

// Start the ticker
ticker.start();
```

--------------------------------

### Color Format Examples for fill()

Source: https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-fill

Shows the different color formats accepted by the fill() method: numbers, hex strings, arrays, and Color objects. Each example creates a 100x100 rectangle filled with red using the respective format.

```ts
// Using a number
const obj1 = new Graphics().rect(0, 0, 100, 100).fill(0xff0000);

// Using a hex string
const obj2 = new Graphics().rect(0, 0, 100, 100).fill('#ff0000');

// Using an array
const obj3 = new Graphics().rect(0, 0, 100, 100).fill([255, 0, 0]);

// Using a Color object
const color = new Color();
const obj4 = new Graphics().rect(0, 0, 100, 100).fill(color);
```

--------------------------------

### Find Children by Label

Source: https://pixijs.com/8.x/guides/components/scene-objects/container

Shows how to create a child with a label and search for it using getChildByLabel and getChildrenByLabel. The second example uses a regex to find all children whose label starts with 'enemy'.

```ts
const child = new Container({ label: 'enemy' });
container.addChild(child);
container.getChildByLabel('enemy');
container.getChildrenByLabel(/^enemy/); // all children whose label starts with "enemy"
```

--------------------------------

### Matrix transformation example

Source: https://pixijs.com/8.x/guides/components/math

Creates a Matrix, applies translation and scaling, and applies it to a Point.

```ts
import { Matrix, Point } from 'pixi.js';

const matrix = new Matrix();
matrix.translate(10, 20).scale(2, 2);

const point = new Point(5, 5);
const result = matrix.apply(point); // result is (20, 30)
```

--------------------------------

### SplitBitmapText basic usage

Source: https://pixijs.com/8.x/guides/components/scene-objects/text/split-text

Creates a SplitBitmapText instance after installing a bitmap font. The example shows installing a font named 'Game Font' and then using it in the SplitBitmapText style. This example is from the 'SplitBitmapText Example' section.

```ts
import { SplitBitmapText, BitmapFont } from 'pixi.js';

// Ensure your bitmap font is installed
BitmapFont.install({
  name: 'Game Font',
  style: { fontFamily: 'Arial', fontSize: 32 },
});

const text = new SplitBitmapText({
  text: 'High Performance',
  style: { fontFamily: 'Game Font', fontSize: 32 },
  autoSplit: true,
});

app.stage.addChild(text);
```

--------------------------------

### Initialize Application with WebGL and WebGPU Options

Source: https://pixijs.com/8.x/guides/components/application

Initialize a PixiJS Application with renderer-specific options. The `webgl` and `webgpu` properties override the `antialias` setting for each renderer type. The example sets a background color and appends the canvas to the document body.

```ts
import { Application } from 'pixi.js';

const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  webgl: {
    antialias: true,
  },
  webgpu: {
    antialias: false,
  },
});
document.body.appendChild(app.canvas);
```

--------------------------------

### Complete integration example: PixiJS and Three.js sharing WebGL context

Source: https://pixijs.com/8.x/guides/third-party/mixing-three-and-pixi

This example sets up a Three.js renderer with stencil enabled, creates a scene with a rotating cube, and initializes a PixiJS renderer that shares the WebGL context. It adds a 2D UI layer with a rounded rectangle and text, then animates both in a single loop. Key points: pass the Three.js context to PixiJS via `pixiRenderer.init({ context: threeRenderer.getContext() })`, set `clearBeforeRender: false`, and reset state before each render.

```ts
// dependencies: { "three": "latest", "pixi.js": "latest" }
// description: A basic integration of PixiJS and Three.js sharing the same WebGL context
// Import required classes from PixiJS and Three.js
import { Container, Graphics, Text, WebGLRenderer } from 'pixi.js';
import * as THREE from 'three';

// Self-executing async function to set up the demo
(async () => {
  // Initialize window dimensions
  let WIDTH = window.innerWidth;
  let HEIGHT = window.innerHeight;

  // === THREE.JS SETUP ===
  // Create Three.js WebGL renderer with antialiasing and stencil buffer
  const threeRenderer = new THREE.WebGLRenderer({
    antialias: true,
    stencil: true,
  });

  // Configure Three.js renderer size and background color
  threeRenderer.setSize(WIDTH, HEIGHT);
  threeRenderer.setClearColor(0xdddddd, 1); // Light gray background
  document.body.appendChild(threeRenderer.domElement);

  // Create Three.js scene
  const scene = new THREE.Scene();

  // Set up perspective camera with 70° FOV
  const threeCamera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);

  threeCamera.position.z = 50; // Move camera back to see the scene
  scene.add(threeCamera);

  // Create a simple cube mesh
  const boxGeometry = new THREE.BoxGeometry(30, 30, 30);
  const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd }); // Blue color
  const cube = new THREE.Mesh(boxGeometry, basicMaterial);

  scene.add(cube);

  // === PIXI.JS SETUP ===
  // Create PixiJS renderer that shares the WebGL context with Three.js
  const pixiRenderer = new WebGLRenderer();

  // Initialize PixiJS renderer with shared context
  await pixiRenderer.init({
    context: threeRenderer.getContext(),
    width: WIDTH,
    height: HEIGHT,
    clearBeforeRender: false, // Don't clear the canvas as Three.js will handle that
  });

  // Create PixiJS scene graph
  const stage = new Container();

  // Create a yellow rounded rectangle UI element
  const uiLayer = new Graphics().roundRect(20, 80, 300, 300, 20).fill(0xffff00);

  // Add text overlay
  const text = new Text({
    text: 'Pixi and Three.js',
    style: { fontFamily: 'Arial', fontSize: 24, fill: 'black' },
  });

  uiLayer.addChild(text);
  stage.addChild(uiLayer);

  // Animation loop
  function loop() {
    // Rotate cube continuously
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // Animate UI layer position using sine wave
    uiLayer.y = ((Math.sin(Date.now() * 0.001) + 1) * 0.5 * WIDTH) / 2;

    // Render Three.js scene
    threeRenderer.resetState();
    threeRenderer.render(scene, threeCamera);

    // Render PixiJS scene
    pixiRenderer.resetState();
    pixiRenderer.render({ container: stage });

    // Continue animation loop
    requestAnimationFrame(loop);
  }

  // Start animation loop
  requestAnimationFrame(loop);

  // Handle window resizing
  window.addEventListener('resize', () => {
    WIDTH = window.innerWidth;
    HEIGHT = window.innerHeight;

    // Update Three.js renderer
    threeRenderer.setSize(WIDTH, HEIGHT);
    // Update Three.js camera aspect ratio so it renders correctly
    threeCamera.aspect = WIDTH / HEIGHT;
    threeCamera.updateProjectionMatrix();

    // Update PixiJS renderer
    pixiRenderer.resize(WIDTH, HEIGHT);
  });
})();
```

--------------------------------

### RenderLayer UI overlay example with PixiJS

Source: https://pixijs.com/8.x/guides/concepts/render-layers

Sets up a PixiJS application with RenderLayer to manage rendering order of UI elements over a world scene. Loads textures from pixijs.com assets and centers the canvas in the viewport. Requires a Fish class imported from './Fish'.

```ts
// description: This example demonstrates the use of RenderLayer to manage the rendering order of UI elements in a scene with multiple sprites and filters using PixiJS.
import {
  Application,
  Assets,
  Container,
  DisplacementFilter,
  RenderLayer,
  Sprite,
  TilingSprite,
} from 'pixi.js';
import { Fish } from './Fish';

(async () => {
  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({ width: 630, height: 410, antialias: true });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);
  // move the canvas to the center of the screen
  app.canvas.style.position = 'absolute';
  app.canvas.style.top = `${window.innerHeight / 2 - app.canvas.height / 2}px`;
  app.canvas.style.left = `${window.innerWidth / 2 - app.canvas.width / 2}px`;

  // Load textures
  await Assets.load([
    `https://pixijs.com/assets/pond/displacement_BG.jpg`,
    `https://pixijs.com/assets/pond/overlay.png`,
    `https://pixijs.com/assets/pond/displacement_map.png`,
  ]);

  // Create a new container for the background image and add it to the stage
  const bg = new Sprite(await Assets.load('https://pixijs.com/assets/pond/displacement_BG.jpg'));
  bg.width = app.screen.width;
  bg.height = app.screen.height;
  bg.texture.baseTexture.wrapMode = 'repeat';
  app.stage.addChild(bg);

  // Create a displacement filter and apply it to the background sprite
  const displacementSprite = await Assets.load('https://pixijs.com/assets/pond/displacement_map.jpg');
  const displacementFilter = new DisplacementFilter(displacementSprite, 50);
  app.stage.filters = [displacementFilter];

  // Create a container for the fish sprites and add it to the stage as a child of the stage's render layer group (default group 0) so it renders below the UI layer. The fish container is added to the stage, not to the render layer, so it will be rendered in the default render layer (group 0). The UI layer is added to the stage as a child of the render layer, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the stage before the UI layer, so it will be rendered first. The UI layer is added to the stage after the fish container, so it will be rendered on top of the fish container. The fish container is added to the
```

--------------------------------

### ObservablePoint example

Source: https://pixijs.com/8.x/guides/components/math

Creates an ObservablePoint with a callback that fires on updates.

```ts
import { Point, ObservablePoint } from 'pixi.js';

const observer = {
  _onUpdate: (point) => {
    console.log(`Point updated to: (${point.x}, ${point.y})`);
  },
};
const reactive = new ObservablePoint(observer, 1, 2);
reactive.set(3, 4); // triggers call to _onUpdate
```

--------------------------------

### Old vs New: Holes with beginHole and cut

Source: https://pixijs.com/8.x/guides/migrations/v8

Compares the v7 beginHole/endHole approach to the v8 cut() method, which acts on the previous shape. The v8 example builds a rect, fills it, then draws a circle and cuts it out.

```ts
const rectAndHole = new Graphics()
  .beginFill(0x00ff00)
  .drawRect(0, 0, 100, 100)
  .beginHole()
  .drawCircle(50, 50, 20)
  .endHole()
  .endFill();
```

```ts
const rectAndHole = new Graphics()
  .rect(0, 0, 100, 100)
  .fill(0x00ff00)
  .circle(50, 50, 20)
  .cut();
```

--------------------------------

### Scaffold a PixiJS project with npm create pixi.js@latest

Source: https://pixijs.com/8.x/guides/getting-started/quick-start

Run this command in your terminal from the directory where you want to create the project. It installs and executes the PixiJS Create CLI, which prompts you to configure the project by selecting options such as a template type (Creation Templates or Bundler Templates). Requires Node.js v20.0 or higher.

```sh
npm create pixi.js@latest
```

--------------------------------

### Enable Ticker autoStart

Source: https://pixijs.com/8.x/guides/components/ticker

Enables autoStart so the ticker automatically starts when a listener is added.

```ts
ticker.autoStart = true;
```

--------------------------------

### AssetPack manifest with compressed texture variants

Source: https://pixijs.com/8.x/guides/components/assets/compressed-textures

Example manifest showing how to reference compressed texture variants with the same alias. PixiJS will try the compressed formats first and fall back to the PNG.

```json
{
  "bundles": [
    {
      "name": "scene",
      "assets": [
        {
          "alias": "bg",
          "src": ["assets/bg.ktx2", "assets/bg.basis", "assets/bg.png"]
        }
      ]
    }
  ]
}
```

--------------------------------

### Visualize scene graph render order with PixiJS Application

Source: https://pixijs.com/8.x/guides/concepts/scene-graph

Creates a PixiJS application that displays a scene graph hierarchy with labels and colored blocks. Uses a ticker to reveal letters one by one, demonstrating the render order. The example sets up containers, sprites, and text, and shows how to control visibility over time.

```typescript
import { Application, Container, Sprite, Text, Texture } from 'pixi.js';

(async () => {
  // Create the application helper and add its render target to the page
  const app = new Application();

  await app.init({ resizeTo: window });
  document.body.appendChild(app.canvas);

  // Label showing scene graph hierarchy
  const label = new Text({
    text: 'Scene Graph:\n\napp.stage\n  ┗ A\n     ┗ B\n     ┗ C\n  ┗ D',
    style: { fill: '#ffffff' },
    position: { x: 300, y: 100 },
  });

  app.stage.addChild(label);

  // Helper function to create a block of color with a letter
  const letters = [];

  function addLetter(letter, parent, color, pos) {
    const bg = new Sprite(Texture.WHITE);

    bg.width = 100;
    bg.height = 100;
    bg.tint = color;

    const text = new Text({
      text: letter,
      style: { fill: '#ffffff' },
    });

    text.anchor.set(0.5);
    text.position = { x: 50, y: 50 };

    const container = new Container();

    container.position = pos;
    container.visible = false;
    container.addChild(bg, text);
    parent.addChild(container);

    letters.push(container);

    return container;
  }

  // Define 4 letters
  const a = addLetter('A', app.stage, 0xff0000, { x: 100, y: 100 });
  const b = addLetter('B', a, 0x00ff00, { x: 20, y: 20 });
  const c = addLetter('C', a, 0x0000ff, { x: 20, y: 40 });
  const d = addLetter('D', app.stage, 0xff8800, { x: 140, y: 100 });

  // Display them over time, in order
  let elapsed = 0.0;

  app.ticker.add((ticker) => {
    elapsed += ticker.deltaTime / 60.0;
    if (elapsed >= letters.length) {
      elapsed = 0.0;
    }
    for (let i = 0; i < letters.length; i++) {
      letters[i].visible = elapsed >= i;
    }
  });
})();
```

--------------------------------

### New: Constructors with object parameters

Source: https://pixijs.com/8.x/guides/migrations/v8

In v8, constructors accept an object with named properties. Note the MeshGeometry example includes a topology and shrinkBuffersToFit property.

```ts
const blurFilter = new BlurFilter({
    blur: 8,
    quality: 4,
    resolution: 1,
    kernelSize: 5,
});
const displacementFilter = new DisplacementFilter({
    sprite,
    scale: 5,
});
const meshGeometry = new MeshGeometry({
    positions: vertices,
    uvs,
    indices: index,
    topology: 'triangle-list';
    shrinkBuffersToFit: boolean;
});
const mesh = new Mesh({
    geometry
    shader
    texture
});
const plane = new PlaneGeometry({
    width,
    height,
    verticesX: segWidth,
    verticesY: segHeight,
});
const nineSliceSprite = new NineSliceSprite({
    texture,
    leftWidth,
    topHeight,
    rightWidth,
    bottomHeight,
});
const tileSprite = new TileSprite({
    texture,
    width,
    height,
});
const text = new Text({
    text: 'Hello World',
    style,
});
const bitmapText = new BitmapText({
    text:'Hello World',
    style,
});
const htmlText = new HTMLText({
    text:'Hello World',
    style,
});
```

--------------------------------

### Load asset bundles in the background with Assets.backgroundLoadBundle

Source: https://pixijs.com/8.x/guides/components/assets/background-loader

Defines a manifest with two bundles ('home-screen' and 'game-screen'), initializes the asset system, starts loading the 'game-screen' bundle in the background, and immediately loads the 'home-screen' bundle. This ensures assets for the current screen are ready while others load in the background.

```TypeScript
const manifest = {
  bundles: [
    {
      name: 'home-screen',
      assets: [
        { alias: 'flowerTop', src: 'https://pixijs.com/assets/flowerTop.png' },
      ],
    },
    {
      name: 'game-screen',
      assets: [
        { alias: 'eggHead', src: 'https://pixijs.com/assets/eggHead.png' },
      ],
    },
  ],
};

// Initialize the asset system with a manifest
await Assets.init({ manifest });

// Start loading both bundles in the background
Assets.backgroundLoadBundle(['game-screen']);

// Load only the first screen assets immediately
const resources = await Assets.loadBundle('home-screen');
```

--------------------------------

### Old vs New: Basic Fill and Stroke

Source: https://pixijs.com/8.x/guides/migrations/v8

Shows the v7 pattern of beginFill/lineStyle followed by shape drawing, and the v8 pattern of building the shape first then applying fill/stroke. The v8 example uses .rect() and .fill()/.stroke() with a StrokeStyle object.

```ts
// red rect
const graphics = new Graphics()
  .beginFill(0xff0000)
  .drawRect(50, 50, 100, 100)
  .endFill();

// blue rect with stroke
const graphics2 = new Graphics()
  .lineStyle(2, 'white')
  .beginFill('blue')
  .circle(530, 50, 140, 100)
  .endFill();
```

```ts
// red rect
const graphics = new Graphics().rect(50, 50, 100, 100).fill(0xff0000);

// blue rect with stroke
const graphics2 = new Graphics()
  .rect(50, 50, 100, 100)
  .fill('blue')
  .stroke({ width: 2, color: 'white' });
```

--------------------------------

### Old vs New: Fill Styles and beginTextureFill

Source: https://pixijs.com/8.x/guides/migrations/v8

Compares the v7 beginTextureFill/beginFill with parameter lists to the v8 fill() method that accepts a FillStyle object or color. The v8 example chains multiple rect/fill calls.

```ts
const rect = new Graphics()
  .beginTextureFill({ texture: Texture.WHITE, alpha: 0.5, color: 0xff0000 })
  .drawRect(0, 0, 100, 100)
  .endFill()
  .beginFill(0xffff00, 0.5)
  .drawRect(100, 0, 100, 100)
  .endFill();
```

```ts
const rect = new Graphics()
  .rect(0, 0, 100, 100)
  .fill({ texture: Texture.WHITE, alpha: 0.5, color: 0xff0000 })
  .rect(100, 0, 100, 100)
  .fill({ color: 0xffff00, alpha: 0.5 });
```

--------------------------------

### Create and populate a ParticleContainer

Source: https://pixijs.com/8.x/guides/components/scene-objects/particle-container

Creates a ParticleContainer with only position as a dynamic property, adds 100,000 particles with random positions, and attaches the container to the stage. Demonstrates the basic setup for high-performance particle rendering.

```ts
import { ParticleContainer, Particle, Texture } from 'pixi.js';

const texture = Texture.from('bunny.png');

const container = new ParticleContainer({
  dynamicProperties: {
    position: true, // default
    vertex: false,
    rotation: false,
    color: false,
  },
});

for (let i = 0; i < 100000; i++) {
  const particle = new Particle({
    texture,
    x: Math.random() * 800,
    y: Math.random() * 600,
  });

  container.addParticle(particle);
}

app.stage.addChild(container);
```

--------------------------------

### Create a PixiJS application with pixelLine grid comparison

Source: https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-pixel-line

This example creates a PixiJS application with two grids: one using `pixelLine: true` and one using `pixelLine: false`. It animates the scale of both grids to show how pixel-perfect lines remain crisp. The code includes a `buildGrid` function that draws a 10x10 grid using `moveTo` and `lineTo`, and uses `stroke` with `pixelLine` to control line rendering.

```TypeScript
import { Application, Container, Graphics, Text } from 'pixi.js';

/**
 * Creates a grid pattern using Graphics lines
 * @param graphics - The Graphics object to draw on
 * @returns The Graphics object with the grid drawn
 */
function buildGrid(graphics) {
  // Draw 10 vertical lines spaced 10 pixels apart
  for (let i = 0; i < 11; i++) {
    // Move to top of each line (x = i*10, y = 0)
    graphics
      .moveTo(i * 10, 0)
      // Draw down to bottom (x = i*10, y = 100)
      .lineTo(i * 10, 100);
  }

  // Draw 10 horizontal lines spaced 10 pixels apart
  for (let i = 0; i < 11; i++) {
    // Move to start of each line (x = 0, y = i*10)
    graphics
      .moveTo(0, i * 10)
      // Draw across to end (x = 100, y = i*10)
      .lineTo(100, i * 10);
  }

  return graphics;
}

(async () => {
  // Create and initialize a new PixiJS application
  const app = new Application();

  await app.init({ antialias: true, resizeTo: window });
  document.body.appendChild(app.canvas);

  // Create two grids - one with pixel-perfect lines and one without
  const gridPixel = buildGrid(new Graphics()).stroke({
    color: 0xffffff,
    pixelLine: true,
    width: 1,
  });

  const grid = buildGrid(new Graphics()).stroke({
    color: 0xffffff,
    pixelLine: false,
  });

  // Position the grids side by side
  grid.x = -100;
  grid.y = -50;
  gridPixel.y = -50;

  // Create a container to hold both grids
  const container = new Container();

  container.addChild(grid, gridPixel);

  // Center the container on screen
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;
  app.stage.addChild(container);

  // Animation variables
  let count = 0;

  // Add animation to scale the grids over time
  app.ticker.add(() => {
    count += 0.01;
    container.scale = 1 + (Math.sin(count) + 1) * 2;
  });

  // Add descriptive label
  const label = new Text({
    text: 'Grid Comparison: Standard Lines (Left) vs Pixel-Perfect Lines (Right)',
    style: { fill: 0xffffff },
  });

  // Position label in top-left corner
  label.position.set(20, 20);
  label.width = app.screen.width - 40;
  label.scale.y = label.scale.x;
  app.stage.addChild(label);
})();
```

--------------------------------

### Combining Textures and Colors with fill()

Source: https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-fill

Shows how to combine a gradient or texture with a color tint and alpha in the fill() method. The first example uses a FillGradient with blue-to-red color stops, while the second uses a texture. Both apply a yellow tint at 50% opacity.

```ts
const gradient = new FillGradient({
  colorStops: [
    { offset: 0, color: 'blue' },
    { offset: 1, color: 'red' },
  ],
});

const obj = new Graphics().rect(0, 0, 100, 100).fill({
  fill: gradient,
  color: 'yellow',
  alpha: 0.5,
});
```

```ts
const obj = new Graphics().rect(0, 0, 100, 100).fill({
  texture: texture,
  color: 'yellow',
  alpha: 0.5,
});
```

--------------------------------

### Application.init(options)

Source: https://pixijs.com/8.x/guides/components/application

Asynchronously initializes the Application with the provided configuration options. This sets up the renderer and ticker according to the options.

```APIDOC
## Application.init(options)

### Description
Asynchronously initializes the Application with the provided configuration options. This sets up the renderer and ticker according to the options.

### Method
async init

### Endpoint
`app.init(options)`

### Parameters
#### Request Body (options)
- **autoStart** (boolean) - Optional - Whether to start rendering immediately after initialization. Setting to `false` will not stop the shared ticker if it's already running. Default: `true`.
- **resizeTo** (Window | HTMLElement) - Optional - Element to auto-resize the renderer to match.
- **sharedTicker** (boolean) - Optional - Use the shared ticker instance if `true`; otherwise, a private ticker is created. Default: `false`.
- **preference** ('webgl' | 'webgpu') - Optional - Preferred renderer type. Default: `webgl`.
- **useBackBuffer** (boolean) - Optional - (WebGL only) Use the back buffer when required. Default: `false`.
- **forceFallbackAdapter** (boolean) - Optional - (WebGPU only) Force usage of fallback adapter. Default: `false`.
- **powerPreference** ('high-performance' | 'low-power') - Optional - Hint for GPU power preference (WebGL & WebGPU).
- **antialias** (boolean) - Optional - Enables anti-aliasing. May impact performance.
- **autoDensity** (boolean) - Optional - Adjusts canvas size based on `resolution`. Applies only to `HTMLCanvasElement`.
- **background** (ColorSource) - Optional - Alias for `backgroundColor`.
- **backgroundAlpha** (number) - Optional - Alpha transparency for background (0 = transparent, 1 = opaque). Default: `1`.
- **backgroundColor** (ColorSource) - Optional - Color used to clear the canvas. Accepts hex, CSS color, or array. Default: `'black'`.
- **canvas** (ICanvas) - Optional - A custom canvas instance (optional).
- **clearBeforeRender** (boolean) - Optional - Whether the renderer should clear the canvas each frame. Default: `true`.
- **context** (WebGL2RenderingContext | null) - Optional - User-supplied rendering context (WebGL). Default: `null`.
- **depth** (boolean) - Optional - Enable a depth buffer in the main view. Always `true` for WebGL.
- **height** (number) - Optional - Initial height of the renderer (in pixels). Default: `600`.

### Request Example
```ts
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});
```

### Response
#### Success Response
- **void** - Resolves when initialization is complete.

### Example
```ts
import { Application } from 'pixi.js';
const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});
document.body.appendChild(app.canvas);
```
```

--------------------------------

### Convert local to global coordinates with toGlobal()

Source: https://pixijs.com/8.x/guides/concepts/scene-graph

Use toGlobal() to get the global position of an object relative to the top-left of the screen. The example creates a Point at (0,0) and returns the global coordinates.

```javascript
// Get the global position of an object, relative to the top-left of the screen
let globalPos = obj.toGlobal(new Point(0, 0));
```

--------------------------------

### Application.init

Source: https://pixijs.com/8.x/guides/components/application

Initializes a new PixiJS Application with the provided options. This method is called after creating an Application instance and accepts a partial options object.

```APIDOC
## Application.init

### Description
Initializes a new PixiJS Application with the provided options. This method is called after creating an Application instance and accepts a partial options object.

### Method
init

### Parameters
#### Options Object
- **width** (`number`) - Optional - Initial width of the renderer (in pixels). Default: `800`.
- **height** (`number`) - Optional - Initial height of the renderer (in pixels). (Not explicitly listed but implied by example.)
- **backgroundColor** (`number`) - Optional - Background color of the renderer. (Not explicitly listed but implied by example.)
- **hello** (`boolean`) - Optional - Log renderer info and version to the console. Default: `false`.
- **multiView** (`boolean`) - Optional - Enable multi-canvas rendering. Default: `false`.
- **preferWebGLVersion** (`1 | 2`) - Optional - Preferred WebGL version. Default: `2`.
- **premultipliedAlpha** (`boolean`) - Optional - Assume alpha is premultiplied in color buffers. Default: `true`.
- **preserveDrawingBuffer** (`boolean`) - Optional - Preserve buffer between frames. Needed for `toDataURL`. Default: `false`.
- **resolution** (`number`) - Optional - The resolution of the renderer. Default: `1`.
- **skipExtensionImports** (`boolean`) - Optional - Prevent automatic import of default PixiJS extensions. Default: `false`.
- **textureGCActive** (`boolean`) - Optional - Enable garbage collection for GPU textures. Default: `true`.
- **textureGCCheckCountMax** (`number`) - Optional - Frame interval between GC runs (textures). Default: `600`.
- **textureGCMaxIdle** (`number`) - Optional - Max idle frames before destroying a texture. Default: `3600`.
- **textureGCAMaxIdle** (`number`) - Optional - (Appears undocumented; placeholder for internal GC controls.)
- **webgl** (`WebGLOptions`) - Optional - Override properties for WebGL renderer. Example: `{ antialias: true }`.
- **webgpu** (`WebGPUOptions`) - Optional - Override properties for WebGPU renderer. Example: `{ antialias: false }`.

### Request Example
```ts
import { Application } from 'pixi.js';

const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  webgl: {
    antialias: true,
  },
  webgpu: {
    antialias: false,
  },
});
document.body.appendChild(app.canvas);
```

### Response
Returns a Promise that resolves when the application is initialized. The `app.canvas` property is available after initialization.
```

--------------------------------

### Setting Segment Anchors in SplitText Constructor

Source: https://pixijs.com/8.x/guides/components/scene-objects/text/split-text

Creates a SplitText instance with custom anchors for lines, words, and characters. Anchors are normalized from 0 (start) to 1 (end), with 0,0 being top-left, 0.5,0.5 center, and 1,1 bottom-right. This example sets lineAnchor to top-right, wordAnchor to center, and charAnchor to bottom-left.

```ts
const text = new SplitText({
  text: 'Animate Me',
  lineAnchor: { x: 1, y: 0 }, // Top-right lines
  wordAnchor: 0.5, // Center words
  charAnchor: { x: 0, y: 1 }, // Bottom-left characters
});
```

--------------------------------

### Get local and global bounds

Source: https://pixijs.com/8.x/guides/components/scene-objects

Use getLocalBounds() to get the object's dimensions in its own coordinate space, and getBounds() to get the bounding box in world coordinates.

```ts
const local = container.getLocalBounds();
const global = container.getBounds();
```

--------------------------------

### new Application()

Source: https://pixijs.com/8.x/guides/components/application

Constructs a new Application instance. The instance must be initialized asynchronously using the .init() method before use.

```APIDOC
## new Application()

### Description
Creates a new Application instance. The instance must be initialized asynchronously using the .init() method before use.

### Method
Constructor

### Syntax
```ts
const app = new Application();
```

### Parameters
None

### Returns
- **Application** - A new Application instance.

### Example
```ts
import { Application } from 'pixi.js';
const app = new Application();
```
```

--------------------------------

### Start and stop the Ticker

Source: https://pixijs.com/8.x/guides/components/ticker

Starts and stops the ticker. `stop()` pauses the ticker and cancels the animation frame.

```ts
ticker.start(); // Begin calling listeners every frame
ticker.stop(); // Pause the ticker and cancel the animation frame
```

--------------------------------

### Initialize PixiJS Application and Display a Grid of Bunnies

Source: https://pixijs.com/8.x/playground

Creates a PixiJS application with a blue background, resizes it to the window, and appends the canvas to the document body. Loads a bunny texture from the PixiJS CDN and adds a 5x5 grid of sprites to a container on the stage.

```javascript
import { Application, Assets, Container, Sprite } from 'pixi.js';
(async () => {
// Create a new application
const app = new Application();
// Initialize the application
await app.init({ background: '#1099bb', resizeTo: window });
// Append the application canvas to the document body
document.body.appendChild(app.canvas);
// Create and add a container to the stage
const container = new Container();
app.stage.addChild(container);
// Load the bunny texture
const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
// Create a 5x5 grid of bunnies in the container
for (let i = 0; i < 25; i++) {
const bunny = new Sprite(texture);
bunny.x = (i % 5) * 40;
bunny.y = Math.floor(i / 5) * 40;
container.addChild(bunny);
}

```

--------------------------------

### Create a diagonal linear gradient with start and end properties

Source: https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-fill

Creates a linear gradient with explicit start and end points to control direction. Setting start to (0,0) and end to (1,1) produces a diagonal gradient from top-left to bottom-right.

```ts
const diagonalGradient = new FillGradient({
  type: 'linear',
  start: { x: 0, y: 0 },
  end: { x: 1, y: 1 },
  colorStops: [
    { offset: 0, color: 'yellow' },
    { offset: 1, color: 'green' },
  ],
});
```

--------------------------------

### Graphics holes: v4 addHole example

Source: https://pixijs.com/8.x/guides/migrations/v5

In v4, holes were drawn using moveTo/lineTo and addHole. This example shows the old API.

```javascript
const graphic = new PIXI.Graphics()  

  .beginFill(0xff0000)  

  .moveTo(0, 0)  

  .lineTo(100, 0)  

  .lineTo(100, 100)  

  .lineTo(0, 100)  

  .moveTo(10, 10)  

  .lineTo(90, 10)  

  .lineTo(90, 90)  

  .lineTo(10, 90)  

  .addHole();  
```

--------------------------------

### Initialize PixiJS with a manifest

Source: https://pixijs.com/8.x/guides/components/assets/manifest

Initializes the PixiJS asset system with a manifest using `Assets.init({ manifest })`. This must be done before loading bundles or individual assets.

```javascript
import { Assets } from 'pixi.js';

await Assets.init({ manifest });
```

--------------------------------

### Initialize Application

Source: https://pixijs.com/8.x/guides/components/application

Construct an Application instance and initialize it asynchronously using the .init() method. The resulting canvas must be manually appended to the DOM.

```ts
import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});

document.body.appendChild(app.canvas);
```

--------------------------------

### SplitText basic usage

Source: https://pixijs.com/8.x/guides/components/scene-objects/text/split-text

Creates a SplitText instance with a string, style, and optional anchor points for lines, words, and characters. The autoSplit option enables automatic splitting. This example is from the 'SplitText Example' section.

```ts
import { SplitText } from 'pixi.js';

const text = new SplitText({
  text: 'Hello World',
  style: { fontSize: 32, fill: 0xffffff },

  // Optional: Anchor points (0-1 range)
  lineAnchor: 0.5, // Center lines
  wordAnchor: { x: 0, y: 0.5 }, // Left-center words
  charAnchor: { x: 0.5, y: 1 }, // Bottom-center characters
  autoSplit: true,
});

app.stage.addChild(text);
```

--------------------------------

### Initialize PixiJS Application in Browser

Source: https://pixijs.com/8.x/guides/concepts/environments

Uses the default BrowserAdapter. No configuration needed. Creates an Application and appends its canvas to the document body.

```typescript
import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
});

document.body.appendChild(app.canvas);
```

--------------------------------

### Enable math-extras

Source: https://pixijs.com/8.x/guides/components/math

Importing 'pixi.js/math-extras' extends Point and Rectangle with additional vector and geometry utilities.

```ts
import 'pixi.js/math-extras';
```

--------------------------------

### Create a MeshGeometry with positions, UVs, indices, and topology

Source: https://pixijs.com/8.x/guides/components/scene-objects/mesh

Shows how to instantiate a MeshGeometry with vertex positions, UV coordinates, indices, and topology. The topology is set to 'triangle-list'.

```ts
const geometry = new MeshGeometry({
  positions: Float32Array, // 2 floats per vertex
  uvs: Float32Array, // matching number of floats
  indices: Uint32Array, // 3 indices per triangle
  topology: 'triangle-list',
});
```

--------------------------------

### Old: Application.view usage

Source: https://pixijs.com/8.x/guides/migrations/v8

In v7, Application.view was used to get the canvas. This is deprecated in v8.

```ts
const app = new Application({ view: document.createElement('canvas') });
document.body.appendChild(app.view);
```

--------------------------------

### Initialize Application with TickerPlugin

Source: https://pixijs.com/8.x/guides/components/application/ticker-plugin

Creates an Application and initializes it with a custom ticker (sharedTicker: false) and autoStart enabled. Adds a ticker callback that updates a bunny's rotation using deltaTime.

```ts
const app = new Application();

await app.init({
  sharedTicker: false,
  autoStart: true,
});

app.ticker.add((ticker) => {
  // Custom update logic here
  bunny.rotation += 1 * ticker.deltaTime;
});
```
Tokens:
Raw