pixijs-scene-graphics— agent skill

Use this for vector drawing with Graphics and reusable GraphicsContext instructions.

Fast Path

import { Graphics } from 'pixi.js';

const g = new Graphics()
  .rect(10, 10, 200, 100)
  .fill({ color: 0x3498db, alpha: 0.8 })
  .stroke({ width: 3, color: 0x2c3e50 });

app.stage.addChild(g);

Rules

• v8 is shape-then-style: call rect, circle, poly, moveTo, lineTo, etc., then fill() and/or stroke().
• Use cut() for holes after drawing the hole path; old beginHole/endHole is v7 API.
• Share stable geometry with const ctx = new GraphicsContext(...); new Graphics(ctx).
• Do not clear and redraw every frame unless the shape really changes; prefer transforms, sprites, meshes, or cacheAsTexture.
• Graphics is a leaf. Group it in a Container; do not add children to it.
• Use drawing transforms (translateTransform, rotateTransform, setTransform, save, restore) only for geometry creation, not scene placement.
• Convert pointer coordinates to local space before containsPoint.

Deep Reads

• Full shapes, gradients, patterns, SVG, transforms, and context utilities: references/details.md
• Scene graph basics: pixijs-scene-core-concepts
• Grouping and lifecycle: pixijs-scene-container
• Performance choices: pixijs-performance

Common Fixes

• beginFill/drawRect/endFill: replace with rect(...).fill(...).
• lineStyle: replace with stroke({ width, color, ... }).
• GraphicsGeometry: replace with GraphicsContext.
• Nested display objects: wrap graphics and children in a Container.