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 ```js // 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); ``` ```js // 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 G...