SilkGraphics

import { SilkGraphics } from 'pixi-silk';

A PixiJS display object with a Graphics-like API. Every primitive is a signed distance field evaluated per pixel, so edges stay sharp at any zoom, rotation and device pixel ratio. Each object is one instanced draw call, and enableSilkBatching() merges neighbours further.

It renders on WebGL2. For WebGPU, call enableWebGPU() from pixi-silk/webgpu before the first SilkGraphics, or create the app with createSilkApp({ preference: 'webgpu' }).

Shapes go on the active path and are painted by fill() or stroke(). stroke() right after fill() paints the same shapes. Redrawing every frame is cheap, because clear() keeps the buffers.

Example#

const g = new SilkGraphics()
    .roundRect(0, 0, 160, 80, 20, 0.6).fill(0x1c1c1e)
    .arc(80, 40, 28, -Math.PI / 2, Math.PI).stroke({ width: 8, cap: 'round', color: 0x30d158 });
app.stage.addChild(g);

Extends#

• Mesh<SilkGeometry, Shader>

Constructors#

Constructor#

new SilkGraphics(options?: SilkGraphicsOptions): SilkGraphics;

Parameters#

Returns#

SilkGraphics

Overrides#

Mesh<SilkGeometry, Shader>.constructor

Properties#

Accessors#

aaWidth#

Get Signature#

get aaWidth(): number;

Width of the anti-aliasing ramp in device pixels. 1 is a crisp box filter, larger is softer. Default 1.

Returns

number

Set Signature#

set aaWidth(v: number): void;

Takes effect on the next render. With batching on, objects regroup by their settings.

Parameters

Returns

void

dither#

Get Signature#

get dither(): number;

Dither amplitude in 8-bit steps for gradients and blurs (0 disables). Default 1.

Returns

number

Set Signature#

set dither(v: number): void;

Takes effect on the next render. With batching on, objects regroup by their settings.

Parameters

Returns

void

minStrokePx#

Get Signature#

get minStrokePx(): number;

Strokes thinner than this many device pixels keep this width and fade instead (hairlines). Default 1.

Returns

number

Set Signature#

set minStrokePx(v: number): void;

Takes effect on the next render. With batching on, objects regroup by their settings.

Parameters

Returns

void

primitiveCount#

Get Signature#

get primitiveCount(): number;

Number of primitives drawn, one instance each. A fill with blur, a dashed stroke or a long path can emit several. 0 after clear().

Returns

number

Methods#

arc()#

arc(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   endAngle: number, 
   anticlockwise?: boolean
): this;

Open circular arc, for strokes. Angles are radians and work as in Canvas 2D: 0 points right and positive angles turn clockwise on screen. It starts its own subpath. A fill paints nothing.

Parameters#

Returns#

this

arcSweep()#

arcSweep(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   sweep: number
): this;

Open arc from a start angle and a signed sweep, radians. Positive sweeps clockwise on screen, clamped to one turn.

Parameters#

Returns#

this

area()#

area(
   points: PointsInput, 
   lower: number | PointsInput, 
   options?: AreaOptions
): this;

Area under a series. Fill it, then stroke draws the top line. Points must be sorted by x. The path transform’s translation and scale apply, but rotation and skew do not: rotate the object instead. It warns once and ignores them.

Parameters#

Returns#

this

beginPath()#

beginPath(): this;

Starts a new, empty active path. Shapes already painted stay. Unpainted shapes are dropped.

Returns#

this

bezierCurveTo()#

bezierCurveTo(
   cp1x: number, 
   cp1y: number, 
   cp2x: number, 
   cp2y: number, 
   x: number, 
   y: number
): this;

Cubic Bezier to (x, y). It is flattened into 2 to 256 line segments, about one per 2 units of its control polygon.

Parameters#

Returns#

this

boolean()#

boolean(
   op: ShapeOp, 
   a: (g: this) => unknown, 
   b: (g: this) => unknown
): this;

Adds one shape to the active path: what a draws combined with what b draws by op. The shapes each callback adds are merged first, and a callback can call boolean() again to nest. Paint the result with fill() or stroke() like any shape. The callbacks only add shapes: do not paint inside them.

The outline is anti-aliased as sharply as a circle. Inside the shape the distance is a close bound: a large blur, spread or inner shadow can round its inner corners slightly.

Parameters#

Returns#

this

Example#

// a ring with a notch: a circle minus a smaller circle and a bar
g.boolean('subtract', (g) => g.circle(50, 50, 40), (g) => g.circle(50, 50, 24).rect(46, 0, 8, 30))
    .fill(0x30d158)
    .stroke({ width: 2, color: 0xffffff });

circle()#

circle(
   x: number, 
   y: number, 
   radius: number
): this;

Circle centred on (x, y). A negative radius counts as positive.

Parameters#

Returns#

this

clear()#

clear(): this;

Removes every shape and resets the drawing transform and its save() stack. It keeps the buffers and releases gradient rows, so redrawing every frame does not allocate.

Returns#

this

closePath()#

closePath(): this;

Closes the current subpath back to its first point. Does nothing after the path was painted.

Returns#

this

containsPoint()#

containsPoint(point: PointData): boolean;

Hit test against the painted shapes, in local coordinates. Rings are hollow and lines count only within their stroke, at least 1 unit to each side. Blur does not widen the hit area. Pixi’s event system calls it when eventMode is set.

Parameters#

Returns#

boolean

Overrides#

Mesh.containsPoint

destroy()#

destroy(options?: DestroyOptions): void;

Destroys the object with its geometry, shader and path texture, and releases its gradient rows.

Parameters#

Returns#

void

Overrides#

Mesh.destroy

ellipse()#

ellipse(
   x: number, 
   y: number, 
   rx: number, 
   ry: number
): this;

Ellipse centred on (x, y) with radii rx and ry, local units. It is not a polygon.

Parameters#

Returns#

this

fill()#

fill(style?: FillInput): this;

Fills the shapes of the active path, as in Pixi: rect().circle().fill() fills both. Each shape is painted on its own unless union or op is set. Open arcs are skipped. The path stays active, so stroke() can follow, and the next shape you add starts a new path. Does nothing on an empty path.

Parameters#

Returns#

this

heart()#

heart(
   cx: number, 
   cy: number, 
   size: number, 
   rounding?: number
): this;

Heart icon centred at (cx, cy), size local units wide. rounding (0..0.3, default 0) puffs it up.

Parameters#

Returns#

this

line()#

line(
   x0: number, 
   y0: number, 
   x1: number, 
   y1: number
): this;

Straight line from (x0, y0) to (x1, y1), as an open path. Stroke it.

Parameters#

Returns#

this

lineTo()#

lineTo(x: number, y: number): this;

Straight segment from the current point to (x, y). Without a current point it starts a subpath at (x, y).

Parameters#

Returns#

this

moveTo()#

moveTo(x: number, y: number): this;

Starts a new subpath at (x, y). fill() paints the path even-odd, stroke() follows it.

Parameters#

Returns#

this

pill()#

pill(
   x: number, 
   y: number, 
   w: number, 
   h: number
): this;

Rounded rect whose corner radius is half its shorter side, so the short ends are half circles.

Parameters#

Returns#

this

poly()#

poly(points: PointsInput, close?: boolean): this;

Pixi-style polygon. fill() paints it as one shape (even-odd), so blur, spread, inner shadows and gradients work on bolts, drops and other free outlines.

Parameters#

Returns#

this

polyline()#

polyline(points: PointsInput, options?: PolylineOptions): this;

Open or closed path through points, optionally smoothed. Stroke it, or fill it as one even-odd shape. Smoothing resamples the points every step local units.

Parameters#

Returns#

this

quadraticCurveTo()#

quadraticCurveTo(
   cpx: number, 
   cpy: number, 
   x: number, 
   y: number
): this;

Quadratic Bezier to (x, y). It is flattened into 2 to 256 line segments, about one per 2 units of its control polygon.

Parameters#

Returns#

this

rect()#

rect(
   x: number, 
   y: number, 
   w: number, 
   h: number
): this;

Rectangle with its top-left corner at (x, y). A negative width or height flips it to the other side.

Parameters#

Returns#

this

regularPoly()#

regularPoly(
   cx: number, 
   cy: number, 
   radius: number, 
   sides: number, 
   rotation?: number, 
   cornerRadius?: number
): this;

Regular polygon with sides corners (rounded, at least 3), the first one pointing up. rotation is radians.

Parameters#

Returns#

this

resetTransform()#

resetTransform(): this;

Resets the drawing transform to identity. The save() stack is kept.

Returns#

this

restore()#

restore(): this;

Pops the transform pushed by the matching save(). Does nothing on an empty stack.

Returns#

this

rotateTransform()#

rotateTransform(angle: number): this;

Rotates the drawing coordinate system by angle radians, clockwise on screen.

Parameters#

Returns#

this

roundRect()#

roundRect(
   x: number, 
   y: number, 
   w: number, 
   h: number, 
   radius?: number | number[], 
   smoothing?: number
): this;

Rectangle with rounded corners. smoothing above 0 turns the corners into squircles. Negative radii count as 0.

Parameters#

Returns#

this

save()#

save(): this;

Pushes the current drawing transform on a stack, as in Pixi’s GraphicsContext. The transform applies to shapes drawn after it, not to the display object.

Returns#

this

scaleTransform()#

scaleTransform(x: number, y?: number): this;

Scales the drawing coordinate system. y defaults to x. Stroke widths, dashes and blur scale with the uniform part, the square root of the determinant.

Parameters#

Returns#

this

sector()#

sector(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   endAngle: number, 
   innerRadius?: number, 
   cornerRadius?: number
): this;

Closed annular sector, for pie slices, donut segments and gauges. Angles are radians, and the sweep is clamped to one turn.

Parameters#

Returns#

this

setTransform()#

setTransform(
   a: number, 
   b: number, 
   c: number, 
   d: number, 
   tx: number, 
   ty: number
): this;

Replaces the drawing transform with the matrix [a c tx; b d ty]. Skew is not supported: shapes take the rotation and the scale of each axis, and widths take the uniform scale.

Parameters#

Returns#

this

star()#

star(
   cx: number, 
   cy: number, 
   points: number, 
   radius: number, 
   innerRadius?: number, 
   rotation?: number, 
   cornerRadius?: number
): this;

Star with points tips (rounded, at least 3). Angles are radians. innerRadius defaults to half of radius and is capped at the inner radius of the regular polygon. cornerRadius rounds every corner.

Parameters#

Returns#

this

stroke()#

stroke(style?: StrokeInput): this;

Strokes the shapes of the active path. Right after fill() on closed shapes it shares their instances, so fill and stroke cost no more than the fill. A width of 0 or less paints nothing.

Parameters#

Returns#

this

svgPath()#

svgPath(d: string): this;

Adds an SVG path (the d attribute) to the active path: M, L, H, V, C, S, Q, T, A and Z, in absolute and relative form. Fill it as one even-odd shape, stroke it, or combine it with other shapes. The current transform applies.

Parameters#

Returns#

this

Example#

g.svgPath('M12 2 L22 22 H2 Z M12 8 L17 18 H7 Z').fill(0xff9f0a);

translateTransform()#

translateTransform(x: number, y?: number): this;

Moves the drawing coordinate system. Shapes drawn next are offset by (x, y), local units. y defaults to x.

Parameters#

Returns#

this

triangle()#

triangle(
   x0: number, 
   y0: number, 
   x1: number, 
   y1: number, 
   x2: number, 
   y2: number, 
   cornerRadius?: number
): this;

Triangle through three points. cornerRadius (local units, default 0) rounds its corners.

Parameters#

Returns#

this