Use this skill when drawing shapes and graphics in Phaser 4. Covers the Graphics game object, lines, rectangles, circles, arcs, polygons, gradients, fill, stroke, and generated textures. Triggers on: Graphics, draw shape, fillRect, lineStyle, polygon, arc.

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 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). When to use which: Use Graphics for dynamic drawing, complex paths, multiple shapes on one object, gradients, or generating textures. Use Shape objects for individual UI elements, simple indicators, physics enabled shapes, or anything that benefits from game object features (origin, bounds, input). Common Patterns Fill and Stroke Styles (Graphics) Drawing Primitives (Graphics) Rounded Rectangles Path Drawing Geom Shape Helpers Graphics has convenience methods that accept Phaser.Geom objects directly: Canvas Transforms (Graphics) Generating Textures from Graphics Note: fillGradientStyle will NOT appear in generated textures (Canvas API limitation). Shape Objects — Fill and Stroke All Shape Types Factory Method Class Parameters (after x, y) Fill Stroke Notes this.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha) Arc radius=128, startAngle=0, endAngle=360 (degrees), anticlockwise=false Yes Yes Angles in degrees. Full circle by default. this.add.circle(x, y, radius, fillColor, fillAlpha) Arc radius=128 Yes Yes Alias for Arc with 0 360 angles. this.add.curve(x, y, curve, fillColor, fillAlpha) Curve Phaser.Curves.Curve object Yes Yes Has smoothness property / setSmoothness() . this.add.ellipse(x, y, width, height, fillColor, fillAlpha) Ellipse width=128, height=128 Yes Yes Equal w/h renders as circle. Has smoothness . this.add.grid(x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha) Grid width=128, height=128, cellWidth=32, cellHeight=32 Yes No Has altFillColor / altFillAlpha for checkerboard. Outline via outlineFillColor. this.add.isobox(x, y, size, height, fillTop, fillLeft, fillRight) IsoBox size=48, height=32, fillTop=0xeeeeee, fillLeft=0x999999, fillRight=0xcccccc Yes No Isometric box. showTop , showLeft , showRight , projection . this.add.isotriangle(x, y, size, height, reversed, fillTop, fillLeft, fillRight) IsoTriangle size=48, height=32, reversed=false Yes No Isometric pyramid. showTop , showLeft , showRight , projection , reversed . this.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha) Line x1=0, y1=0, x2=128, y2=0 No Yes Stroke only. Constructor takes stroke color (not fill). this.add.polygon(x, y, points, fillColor, fillAlpha) Polygon points (various formats) Yes Yes Points: array of Vec2, [x,y,...] pairs, or [[x,y],...] . this.add.rectangle(x, y, width, height, fillColor, fillAlpha) Rectangle width=128, height=128 Yes Yes Change size via width / height properties. this.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha) Star points=5, innerRadius=32, outerRadius=64 Yes Yes 4 points = diamond. More points = spikier. this.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha) Triangle x1=0,y1=128, x2=64,y2=0, x3=128,y3=128 Yes Yes Always closed. Use Polygon for open shapes. API Quick Reference — Graphics Methods Style Methods Method Signature Notes fillStyle (color, alpha=1) Set fill for subsequent fill calls lineStyle (lineWidth, color, alpha=1) Set stroke for subsequent stroke calls fillGradientStyle (tl, tr, bl, br, aTL=1, aTR, aBL, aBR) WebGL only. 4 corner colors. lineGradientStyle (lineWidth, tl, tr, bl, br, alpha=1) WebGL only. setDefaultStyles (options) Set via { lineStyle: {width,color,alpha}, fillStyle: {color,alpha} } Path Methods Method Signature Notes beginPath () Start a new path moveTo (x, y) Move draw position lineTo (x, y) Line to position arc (x, y, radius, startAngle, endAngle, anticlockwise=false, overshoot=0) Angles in radians closePath () Close current path fillPath / fill () Fill the current path strokePath / stroke () Stroke the current path slice (x, y, radius, startAngle, endAngle, anticlockwise=false, overshoot=0) Pie slice. Auto begins/closes path. Angles in radians. Shape Drawing Methods Method Signature fillRect (x, y, width, height) strokeRect (x, y, width, height) fillRoundedRect (x, y, width, height, radius=20) strokeRoundedRect (x, y, width, height, radius=20) fillCircle (x, y, radius) strokeCircle (x, y, radius) fillEllipse (x, y, width, height, smoothness=32) strokeEllipse (x, y, width, height, smoothness=32) fillTriangle (x0, y0, x1, y1, x2, y2) strokeTriangle (x0, y0, x1, y1, x2, y2) fillPoint (x, y, size=1) lineBetween (x1, y1, x2, y2) strokePoints (points, closeShape=false, closePath=false, endIndex) fillPoints (points, closeShape=false, closePath=false, endIndex) Geom Shape Methods Method Signature fillRectShape (rect) strokeRectShape (rect) fillCircleShape (circle) strokeCircleShape (circle) fillTriangleShape (triangle) strokeTriangleShape (triangle) strokeLineShape (line) fillEllipseShape (ellipse, smoothness=32) strokeEllipseShape (ellipse, smoothness=32) Transform and State Methods Method Signature Notes translateCanvas (x, y) Translate subsequent draws scaleCanvas (x, y) Scale subsequent draws rotateCanvas (radians) Rotate subsequent draws save () Push state to stack restore () Pop state from stack clear () Clear command buffer, reset to default styles generateTexture (key, width, height) Bake to a Texture (Canvas API) Shape Base Class Methods Method Signature Notes setFillStyle (color?, alpha=1) No args = disable fill setStrokeStyle (lineWidth?, color?, alpha=1) No args = disable stroke Gotchas 1. Graphics arc() uses radians; Shape arc factory uses degrees. The Graphics arc method takes start/end angles in radians. The this.add.arc() factory takes them in degrees (0 360). Mixing these up is the most common bug. 2. Set style BEFORE drawing. fillStyle and lineStyle must be called before the corresponding fill/stroke method. They are not retroactive. 3. Graphics has no Origin or GetBounds. Unlike Shape objects, Graphics does not include the Origin or GetBounds components. Use setPosition(x, y) and displayOriginX / displayOriginY instead. 4. Shape isFilled/isStroked defaults. Shapes created with a fillColor parameter have isFilled = true . But isStroked defaults to false — you must call setStrokeStyle() explicitly. 5. Line shape is stroke only. The Line shape does not support fill. Its constructor takes strokeColor / strokeAlpha (not fillColor). 6. IsoBox/IsoTriangle are fill only. These shapes cannot be stroked. Grid supports outline strokes via its constructor parameters ( outlineFillColor , outlineFillAlpha ). 7. generateTexture uses Canvas API. Gradient fills ( fillGradientStyle ) will not appear in textures generated with generateTexture . Only Canvas compatible features are captured. 8. Performance: Graphics is expensive. Each frame the command buffer is replayed and geometry is rebuilt (WebGL decomposes to polygons). For static shapes, call generateTexture and use the resulting texture as a Sprite. Group Graphics objects together to minimize batch breaks. 9. pathDetailThreshold (v4 new). Graphics has a pathDetailThreshold property (default 1, uses config render.pathDetailThreshold ). Path segments below this pixel threshold are combined, improving WebGL performance on complex shapes. Evaluated in screen pixels, so detail emerges when zoomed in. 10. Rounded rect radius can be an object or number. Pass { tl, tr, bl, br } for per corner control. Negative values create concave corners. Default is 20 when omitted. 11. Shape closePath property. The closePath property on Shape objects (default true ) controls whether the stroke path is automatically closed. Set to false for open stroked shapes. 12. Shape objects do NOT support tint methods. Unlike Sprites and Images, Shape game objects do not have setTint() or tint properties. Use setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha) instead. 13. Polygon getBounds() incorrect with negative points. If any polygon points have negative coordinates, getBounds() returns wrong values. Use Phaser.Geom.Polygon.GetAABB(polygon.geom) instead and adjust the returned Rectangle position. Shape Specific Methods Star Line (Tapering) Grid (Alternating Colors, Stroke, Padding) IsoBox / IsoTriangle Source File Map File Purpose src/gameobjects/graphics/Graphics.js Graphics class — all drawing methods src/gameobjects/graphics/GraphicsFactory.js this.add.graphics() factory src/gameobjects/graphics/Commands.js Internal command constants for the command buffer src/gameobjects/graphics/GraphicsRender.js Render dispatch src/gameobjects/shape/Shape.js Base Shape class (fill/stroke/path data, setFillStyle, setStrokeStyle) src/gameobjects/shape/arc/Arc.js Arc shape (also used for circle) src/gameobjects/shape/arc/ArcFactory.js this.add.arc() and this.add.circle() factories src/gameobjects/shape/curve/Curve.js Curve shape src/gameobjects/shape/curve/CurveFactory.js this.add.curve() factory src/gameobjects/shape/ellipse/Ellipse.js Ellipse shape src/gameobjects/shape/ellipse/EllipseFactory.js this.add.

graphics-and-shapes