Vector graphics drawing API for creating shapes, paths, fills, and strokes. The Graphics class provides a powerful vector drawing system with support for SVG path commands, gradients, patterns, and complex shapes.
Main graphics drawing class for creating vector shapes and paths.
/**
* Graphics class for drawing vector shapes and paths
*/
class Graphics extends Container {
constructor(context?: GraphicsContext);
/** Graphics drawing context */
context: GraphicsContext;
/** Current fill style */
fill: FillStyle;
/** Current stroke style */
stroke: StrokeStyle;
/**
* Draw rectangle
* @param x - X position
* @param y - Y position
* @param width - Width
* @param height - Height
* @returns This graphics instance
*/
rect(x: number, y: number, width: number, height: number): this;
/**
* Draw rounded rectangle
* @param x - X position
* @param y - Y position
* @param width - Width
* @param height - Height
* @param radius - Corner radius
* @returns This graphics instance
*/
roundRect(x: number, y: number, width: number, height: number, radius: number): this;
/**
* Draw circle
* @param x - Center X
* @param y - Center Y
* @param radius - Radius
* @returns This graphics instance
*/
circle(x: number, y: number, radius: number): this;
/**
* Draw ellipse
* @param x - Center X
* @param y - Center Y
* @param halfWidth - Half width
* @param halfHeight - Half height
* @returns This graphics instance
*/
ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
/**
* Draw polygon from points
* @param points - Array of points or flat coordinate array
* @returns This graphics instance
*/
poly(points: PointData[] | number[]): this;
/**
* Draw regular polygon
* @param x - Center X
* @param y - Center Y
* @param radius - Radius
* @param sides - Number of sides
* @param rotation - Rotation angle
* @returns This graphics instance
*/
regularPoly(x: number, y: number, radius: number, sides: number, rotation?: number): this;
/**
* Draw star shape
* @param x - Center X
* @param y - Center Y
* @param points - Number of points
* @param radius - Outer radius
* @param innerRadius - Inner radius
* @param rotation - Rotation angle
* @returns This graphics instance
*/
star(x: number, y: number, points: number, radius: number, innerRadius?: number, rotation?: number): this;
/**
* Fill current path
* @param style - Fill style
* @returns This graphics instance
*/
fill(style?: FillInput): this;
/**
* Stroke current path
* @param style - Stroke style
* @returns This graphics instance
*/
stroke(style?: StrokeInput): this;
/**
* Clear all graphics
* @returns This graphics instance
*/
clear(): this;
/**
* Cut a hole in the current path
* @returns This graphics instance
*/
cut(): this;
/**
* Save current graphics state
* @returns This graphics instance
*/
save(): this;
/**
* Restore previous graphics state
* @returns This graphics instance
*/
restore(): this;
/**
* Get local bounds
* @param out - Rectangle to store bounds
* @returns Bounds rectangle
*/
getLocalBounds(out?: Rectangle): Rectangle;
/**
* Check if point is inside graphics
* @param point - Point to test
* @returns True if point is inside
*/
containsPoint(point: PointData): boolean;
/**
* Destroy graphics and clean up
* @param options - Destroy options
*/
destroy(options?: DestroyOptions): void;
/**
* Clone graphics
* @returns Cloned graphics
*/
clone(): Graphics;
}Lower-level graphics context for path building and drawing operations.
/**
* Graphics context for path building and drawing
*/
class GraphicsContext {
constructor();
/**
* Move to position without drawing
* @param x - X position
* @param y - Y position
* @returns This context
*/
moveTo(x: number, y: number): this;
/**
* Draw line to position
* @param x - X position
* @param y - Y position
* @returns This context
*/
lineTo(x: number, y: number): this;
/**
* Draw quadratic curve
* @param cpx - Control point X
* @param cpy - Control point Y
* @param x - End X
* @param y - End Y
* @returns This context
*/
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
/**
* Draw bezier curve
* @param cp1x - Control point 1 X
* @param cp1y - Control point 1 Y
* @param cp2x - Control point 2 X
* @param cp2y - Control point 2 Y
* @param x - End X
* @param y - End Y
* @returns This context
*/
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
/**
* Draw arc
* @param x - Center X
* @param y - Center Y
* @param radius - Radius
* @param startAngle - Start angle in radians
* @param endAngle - End angle in radians
* @param anticlockwise - Draw counter-clockwise
* @returns This context
*/
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
/**
* Draw arc to point
* @param x1 - Control point X
* @param y1 - Control point Y
* @param x2 - End point X
* @param y2 - End point Y
* @param radius - Arc radius
* @returns This context
*/
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
/**
* Close current path
* @returns This context
*/
closePath(): this;
/**
* Draw rectangle
* @param x - X position
* @param y - Y position
* @param width - Width
* @param height - Height
* @returns This context
*/
rect(x: number, y: number, width: number, height: number): this;
/**
* Draw rounded rectangle
* @param x - X position
* @param y - Y position
* @param width - Width
* @param height - Height
* @param radius - Corner radius
* @returns This context
*/
roundRect(x: number, y: number, width: number, height: number, radius: number): this;
/**
* Draw circle
* @param x - Center X
* @param y - Center Y
* @param radius - Radius
* @returns This context
*/
circle(x: number, y: number, radius: number): this;
/**
* Draw ellipse
* @param x - Center X
* @param y - Center Y
* @param halfWidth - Half width
* @param halfHeight - Half height
* @returns This context
*/
ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
/**
* Clear all paths
* @returns This context
*/
clear(): this;
/**
* Get bounds of all paths
* @param out - Rectangle to store bounds
* @returns Bounds rectangle
*/
getBounds(out?: Rectangle): Rectangle;
/**
* Clone context
* @returns Cloned context
*/
clone(): GraphicsContext;
}Various fill style options for graphics shapes.
/**
* Solid color fill
*/
interface FillStyle {
/** Fill color */
color: ColorSource;
/** Fill alpha */
alpha: number;
/** Visible flag */
visible: boolean;
}
/**
* Gradient fill
*/
class FillGradient {
constructor(x0: number, y0: number, x1: number, y1: number);
/** Gradient type */
type: 'linear' | 'radial';
/** Start X position */
x0: number;
/** Start Y position */
y0: number;
/** End X position */
x1: number;
/** End Y position */
y1: number;
/** Color stops */
stops: GradientStop[];
/**
* Add color stop
* @param offset - Position (0-1)
* @param color - Color at stop
* @returns This gradient
*/
addColorStop(offset: number, color: ColorSource): this;
/**
* Create linear gradient
* @param x0 - Start X
* @param y0 - Start Y
* @param x1 - End X
* @param y1 - End Y
* @returns Linear gradient
*/
static createLinearGradient(x0: number, y0: number, x1: number, y1: number): FillGradient;
/**
* Create radial gradient
* @param x0 - Start X
* @param y0 - Start Y
* @param r0 - Start radius
* @param x1 - End X
* @param y1 - End Y
* @param r1 - End radius
* @returns Radial gradient
*/
static createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): FillGradient;
}
/**
* Pattern fill
*/
class FillPattern {
constructor(texture: Texture, matrix?: Matrix);
/** Pattern texture */
texture: Texture;
/** Transform matrix */
matrix: Matrix;
/** Repeat mode */
repeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
}
interface GradientStop {
/** Stop position (0-1) */
offset: number;
/** Color at stop */
color: ColorSource;
}
type FillInput = ColorSource | FillStyle | FillGradient | FillPattern;Stroke style options for graphics outlines.
/**
* Stroke style configuration
*/
interface StrokeStyle {
/** Stroke color */
color: ColorSource;
/** Stroke alpha */
alpha: number;
/** Stroke width */
width: number;
/** Line cap style */
cap: 'butt' | 'round' | 'square';
/** Line join style */
join: 'miter' | 'round' | 'bevel';
/** Miter limit */
miterLimit: number;
}
type StrokeInput = ColorSource | StrokeStyle;SVG path parsing and rendering support.
/**
* SVG path parser
*/
class SVGParser {
/**
* Parse SVG path string
* @param path - SVG path string
* @returns Graphics path
*/
static parsePath(path: string): GraphicsPath;
/**
* Parse SVG element
* @param svg - SVG element or string
* @returns Graphics context
*/
static parseSVG(svg: string | SVGElement): GraphicsContext;
}
/**
* Graphics path for complex shapes
*/
class GraphicsPath {
constructor();
/** Path instructions */
instructions: PathInstruction[];
/**
* Move to position
* @param x - X position
* @param y - Y position
* @returns This path
*/
moveTo(x: number, y: number): this;
/**
* Line to position
* @param x - X position
* @param y - Y position
* @returns This path
*/
lineTo(x: number, y: number): this;
/**
* Close path
* @returns This path
*/
closePath(): this;
/**
* Get bounds
* @param out - Rectangle to store bounds
* @returns Bounds rectangle
*/
getBounds(out?: Rectangle): Rectangle;
}Usage Examples:
import { Graphics, FillGradient, FillPattern, Assets } from 'pixi.js';
// Basic shapes
const graphics = new Graphics();
// Rectangle with fill and stroke
graphics
.rect(0, 0, 100, 100)
.fill(0xff0000)
.stroke({ color: 0x000000, width: 2 });
// Circle with gradient fill
const gradient = new FillGradient(0, 0, 100, 100);
gradient.addColorStop(0, 0xff0000);
gradient.addColorStop(1, 0x0000ff);
graphics
.circle(200, 50, 50)
.fill(gradient);
// Complex path
graphics
.moveTo(300, 0)
.lineTo(350, 50)
.lineTo(300, 100)
.lineTo(250, 50)
.closePath()
.fill(0x00ff00);
// Pattern fill
const texture = await Assets.load('pattern.png');
const pattern = new FillPattern(texture);
graphics
.rect(400, 0, 100, 100)
.fill(pattern);
// Advanced drawing with context
const context = graphics.context;
context.save();
context.moveTo(0, 150);
context.bezierCurveTo(50, 100, 150, 200, 200, 150);
context.stroke({ color: 0xff00ff, width: 3 });
context.restore();
// SVG path
graphics.svg('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
graphics.fill(0xffff00);
// Interactive graphics
graphics.interactive = true;
graphics.on('pointerdown', (event) => {
console.log('Graphics clicked at', event.global.x, event.global.y);
});
// Animation
app.ticker.add(() => {
graphics.rotation += 0.01;
});