graphics-and-shapes

Phaser 4 — Graphics and Shapes

Drawing primitives with the Graphics game object, and using Shape game objects (Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star, Triangle).

Related skills: sprites-and-images.md, game-object-components.md

---

Quick Start

// Draw a filled rectangle and stroked circle with Graphics
const gfx = this.add.graphics();

gfx.fillStyle(0x00aa00, 1);
gfx.fillRect(50, 50, 200, 100);

gfx.lineStyle(3, 0xff0000, 1);
gfx.strokeCircle(400, 150, 60);

// Same shapes as standalone Shape game objects
const rect = this.add.rectangle(150, 100, 200, 100, 0x00aa00);
const circle = this.add.circle(400, 150, 60);
circle.setStrokeStyle(3, 0xff0000);

---

Core Concepts — Graphics vs Shape Objects

Phaser offers two approaches for rendering primitives without textures.

Graphics Game Object

Created with this.add.graphics(). An imperative drawing surface — you call methods like fillRect, strokeCircle, beginPath/lineTo/strokePath to build up a command buffer that replays each frame.

• Factory: this.add.graphics(config?) where config is { x?, y?, lineStyle?, fillStyle? }.
• Supports paths, arcs, gradients, rounded rectangles, canvas transforms (translateCanvas, scaleCanvas, rotateCanvas), and save/restore.
• Can generate a Texture from the drawing via generateTexture(key, width, height).
• Expensive to render, especially with complex shapes. Uses its own WebGL shader. Group Graphics objects together to minimize batch flushes.
• Components: AlphaSingle, BlendMode, Depth, Lighting, Mask, RenderNodes, Transform, Visible, ScrollFactor.
• Does NOT include Origin or GetBounds (position is set via options or setPosition).

Shape Game Objects

Individual game objects (Arc, Rectangle, Star, etc.) extending the base Shape class. Each renders one predefined geometric shape with precomputed path data.

• Created via dedicated factory methods: this.add.rectangle(...), this.add.circle(...), etc.
• Fully featured game objects: can be tweened, scaled, added to groups/containers, enabled for input/physics.
• Style via setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha).
• Share the same WebGL batch as Graphics for efficient rendering.
• Do NOT support gradients, path detail threshold, or canvas transforms.
• Components: AlphaSingle, BlendMode, Depth, GetBounds, Lighting, Mask, Origin, RenderNodes, ScrollFactor, Transform, Visible.
• Include Origin and GetBounds (unlike Graphics).