fvtt-canvas

# Foundry VTT Canvas & PIXI.js

**Domain:** Foundry VTT Module/System Development
**Status:** Production-Ready
**Last Updated:** 2026-01-05

## Overview

The Foundry canvas is a WebGL-powered HTML5 canvas using PIXI.js for rendering. Understanding the layer architecture and PIXI basics is essential for visual customizations.

### When to Use This Skill

- Adding custom visual elements to the canvas
- Extending token/tile rendering
- Working with canvas layers
- Optimizing render performance
- Handling canvas lifecycle events

## Canvas Architecture

### Layer Hierarchy (Bottom to Top)

**Primary Group:**
- Background Layer - Scene backdrop
- Token Layer - Characters and creatures
- Tile Layer - Props and decorations
- Foreground Layer - Overlay images
- Weather Layer - Environmental effects
- Effects/Lighting - Vision and lighting

**Interface Group:**
- Walls Layer - Movement/sight blocking
- Sounds Layer - Audio zones
- Drawings Layer - User markup
- Templates Layer - Spell areas
- Notes Layer - Journal pins
- Controls Layer - Selection UI
- Grid Layer - Grid overlay

### Accessing Layers

```javascript
canvas.tokens      // TokenLayer
canvas.tiles       // TileLayer
canvas.drawings    // DrawingsLayer
canvas.templates   // TemplatesLayer
canvas.walls       // WallsLayer
canvas.lighting    // LightingLayer
canvas.sounds      // SoundsLayer
canvas.notes       // NotesLayer
canvas.grid        // GridLayer

canvas.primary     // PrimaryCanvasGroup
canvas.interface   // InterfaceCanvasGroup
canvas.environment // EnvironmentCanvasGroup
```

## PIXI.js Basics

### Containers

Group objects together:

```javascript
const group = new PIXI.Container();
group.addChild(sprite1);
group.addChild(sprite2);

// Position the group (moves all children)
group.position.set(100, 100);
group.rotation = Math.PI / 4;

canvas.tokens.addChild(group);
```

### Sprites

Display images:

```javascript
const sprite = PIXI.Sprite.from("path/to/image.png");

// Use anchor for rotation center (0