Name: pixijs-scene-graphics
Author: pixijs

Use this skill when drawing vector shapes and paths in PixiJS v8. Covers the Graphics API: shape-then-fill methods (rect/circle/ellipse/poly/roundRect/star/regularPoly/roundPoly/roundShape/filletRect/chamferRect), path methods (moveTo/lineTo/bezierCurveTo/quadraticCurveTo/arc/arcTo/arcToSvg/closePat

Graphics is the vector drawing leaf of the PixiJS v8 scene graph. The v8 API follows a shape then style pattern: draw a shape or path with rect , circle , moveTo , etc., then apply fill and/or stroke . Every method returns this for chaining, and the drawing instructions live on a GraphicsContext that can be shared between instances. Assumes familiarity with pixijs scene core concepts . Graphics is a leaf: do not nest children inside it. Wrap multiple Graphics objects in a Container to group them. Quick Start Related skills: pixijs scene core concepts (scene graph basics), pixijs scene container (group graphics with other objects), pixijs scene core concepts/references/masking.md (Graphics as a stencil mask), pixijs filters (effects), pixijs performance (batching, cacheAsTexture ). Constructor options All Container options ( position , scale , tint , label , filters , zIndex , etc.) are also valid here — see skills/pixijs scene core concepts/references/constructor options.md . Leaf specific options added by GraphicsOptions : Option Type Default Description context GraphicsContext new GraphicsContext() Shared drawing context. Passing a context reuses its tessellated geometry across multiple Graphics nodes, avoiding duplicate GPU work. If omitted, each Graphics creates and owns a new context. roundPixels boolean false Rounds the final on screen x / y to the nearest pixel. Produces crisper lines for pixel art styles at the cost of smooth sub pixel movement. The constructor also accepts a GraphicsContext instance as its sole argument ( new Graphics(ctx) ), which is shorthand for new Graphics({ context: ctx }) . Core Patterns Shape then fill workflow fill() accepts a FillInput : a color number/string, { color, alpha, texture, matrix, textureSpace } , a FillGradient , a FillPattern , or a Texture . When filling with a texture, textureSpace controls coordinate mapping: 'local' (default): texture is scaled to fit each shape's bounding box (normalized 0 1 coordinates). 'global' : texture position/scale are relative to the Graphics object's coordinate system, shared across all shapes. Atlas sub textures: 'global' honors the frame origin and rotation, so a shape drawn at the frame's size matches a Sprite of that frame. 'local' maps the whole source image; pass a matrix that targets the frame's region of the source, or renderer.generateTexture() the frame first. FillInput also supports a nested fill subfield: a FillStyle options object can embed a FillGradient or FillPattern under its fill key, which applies the gradient or pattern alongside the color , alpha , texture , and matrix modifiers on the outer object. stroke() accepts a color, a FillGradient , a FillPattern , or a StrokeStyle object that combines all FillStyle keys ( color , alpha , texture , matrix , fill , textureSpace ) with stroke attributes: Attribute Default Notes width 1 Pixel width of the stroke. cap 'butt' One of 'butt' , 'round' , 'square' . End style for open paths. join 'miter' One of 'miter' , 'round' , 'bevel' . Corner style. miterLimit 10 Caps how far miter joins extend before falling back to bevel. alignment 0.5 1 = inside the shape, 0.5 = centered, 0 = outside. pixelLine false Aligns 1 pixel lines to the pixel grid for crisp output. Graphics only. Strokes can use the same gradients and patterns as fills via fill: gradient or texture: tex : Both fill() and stroke() can be called after the same shape; calling stroke() immediately after fill() reuses the same path. Advanced shape primitives Holes with cut() cut() subtracts the current active path from the previously drawn fill or stroke. Rules: The hole must be completely inside the target shape. Holes that overlap edges or sit outside the shape will not render correctly because the renderer triangulates with the hole as an interior boundary. cut() looks back at up to the last two instructions. When you fill() and then stroke() the same path, a single cut() adds the hole to the stroke first; a second cut() adds it to the fill underneath. After cut() , the active path resets so you can start the next shape with moveTo , rect , etc. cut() applies to strokes too — g.rect(...).stroke(...).circle(...).cut() cuts a hole through the stroke outline. Punch multiple holes with a single cut() by drawing several shapes into the active path before calling it. Each shape accumulates into the same hole path: If you need holes on separate filled shapes, give each shape its own fill() and matching cut() : Calling cut() on a shape that already has a hole adds to the existing hole path rather than replacing it. Use this to layer holes additively. Paths and complex shapes Path methods: moveTo , lineTo , bezierCurveTo , quadraticCurveTo , arc , arcTo , arcToSvg , closePath . Call beginPath() to discard the current path and start a new one. Gradients and patterns FillGradient 's default type is 'linear' with start {0,0} to end {0,1} (vertical). Set type: 'radial' with center / innerRadius and outerCenter / outerRadius for radial gradients; rotation (radians, default 0 ) and scale (default 1 ) make it elliptical and apply to Graphics only. textureSpace defaults to 'local' (normalized 0 1 shape coordinates); use 'global' for pixel coordinates shared across shapes. FillPattern takes an options object ( { texture, repetition?, textureSpace? } ) or the legacy positional form ( new FillPattern(texture, repetition?) ). repetition selects the tiling mode. textureSpace controls how tiles map to shapes: 'global' (default): tiles repeat continuously across the Graphics coordinate system, so adjacent shapes share one tiling grid. Best for backgrounds and seamless textures. 'local' : a single tile fits each shape's bounds. Combine with setTransform to subdivide a shape into a tile grid. Note FillPattern defaults textureSpace to 'global' , unlike the 'local' default for texture fills shown above. setTransform(matrix) copies the given matrix directly onto the pattern transform to scale, rotate, or offset the tiling; call setTransform() with no argument to reset to identity. Set textureSpace and the transform on the FillPattern itself. When a pattern is passed inside a style object ( fill({ fill: pattern, textureSpace: "local" }) ), the pattern's own values replace the style's textureSpace and matrix . Drawing a texture directly Graphics.texture(texture, tint?, dx?, dy?, dw?, dh?) is a shortcut for drawing a single textured rect without going through fill() . Useful for icons where you don't need the full sprite lifecycle. GraphicsContext sharing Context sharing avoids duplicate GPU geometry; the expensive tessellation runs once. You can also assign a context after construction: g.context = existingContext . SVG import and export Parse SVG markup into the active context with svg() : svg() parses <path (with fill rule="evenodd" holes), <rect , <circle , <ellipse , <line , <polygon , <polyline , and <g grouping. Styling comes from fill , stroke , stroke width , fill opacity , stroke opacity , and opacity , as attributes or inline style . <linearGradient and <radialGradient definitions in <defs become FillGradient s applied through url( id) ; gradientUnits maps to textureSpace and percentage coordinates are accepted. Not supported: transform attributes, <style blocks, stroke linecap / stroke linejoin / stroke dasharray , gradientTransform , spreadMethod , stop opacity , <text , <image , <use , <clipPath , <mask , <pattern . Unsupported elements log a warning and are skipped. Complex hole geometries may render inaccurately because Pixi's triangulation is performance optimized. Serialize a Graphics or GraphicsContext back to a self contained SVG document string with graphicsContextToSvg : graphicsContextToSvg(source, precision = 2) is a pure function that reads the context's instructions and returns a complete <svg string with an auto computed viewBox . Pass a Graphics or a GraphicsContext ; precision controls decimal places on emitted coordinates. Exports every shape then fill primitive (advanced ones like regularPoly / filletRect fall back to a shape path), all path methods, stroke attributes ( width , cap , join , miterLimit ), fill opacity / stroke opacity , and FillGradient (linear and radial) via a <defs block. Holes collapse into one <path with fill rule="evenodd" . FillPattern and texture fills have no SVG equivalent: patterns fall through to the fill's solid color , and texture() instructions are skipped entirely. Exported markup roundtrips back through g.svg(...) without cleanup, so you can export, store, and later reimport a shape into another Graphics . Reusing a GraphicsPath Graphics.path(graphicsPath) (and GraphicsContext.path() ) appends a prebuilt GraphicsPath onto the active path. Build once, draw many times. Draw time transforms Graphics has its own transform stack used while drawing that is separate from the Container transform applied to the rendered output. The drawing methods are renamed to avoid clashing with Container.rotation , Container.scale , Container.position : Drawing transform Container transform g.rotateTransform(angle) g.rotation g.scaleTransform(x, y?) g.scale.set(x, y) g.translateTransform(x, y?) g.position.set(x, y) g.setTransform(matrix) or setTransform(a,b,c,d,tx,ty) g.setFromMatrix(matrix) g.transform(matrix) or transform(a,b,c,d,tx,ty) n/a g.getTransform() / g.resetTransform() n/a The drawing transform affects every subsequent shape and path command added to the context. Use save() / restore() to scope it. State save/restore save() pushes the drawing transform, fill style, and stroke style onto a stack; restore() pops them. Graphics exposes save / restore directly, mirroring the underlying GraphicsContext calls. Default styles via setFillStyle / setStrokeStyle setFillStyle() and setStrokeStyle() configure the default style used by subsequent fill() / stroke() calls when no argument is passed. Read or replace the current style at any time via the fillStyle and strokeStyle getters/setters. Override the library wide defaults by mutating GraphicsContext.defaultFillStyle and GraphicsContext.defaultStrokeStyle once at startup. Hit testing Graphics.containsPoint(pointInLocalSpace) runs a topology aware test against every filled and stroked shape in the context, including holes. Convert global pointer coordinates with toLocal() first. Stroked shapes hit test against the drawn stroke: the hit band follows the stroke's width and alignment ( 1 inside, 0.5 centered, 0 outside), independent of the polygon's