@pixi/graphics-smooth and PixiJS v8
@pixi/graphics-smooth, the anti-aliased Graphics plugin, targets PixiJS v7. For smooth, anti-aliased lines and shapes on PixiJS v8, use SilkGraphics.
Updated pixi-silk 0.1.0
@pixi/graphics-smooth is the community plugin
that made PixiJS Graphics smooth. Its drop-in SmoothGraphics class anti-aliases shapes in the
shader (HHAA), without MSAA. The current release is built for PixiJS v7. Its 1.1 line requires
PixiJS 7.2 or a newer v7 and was last published in 2024. As of September 2026, there is no v8
release on npm. If you move to PixiJS v8 and need the same smoothness, use pixi-silk’s
SilkGraphics. It fills that role with a v8-style API.
What changes#
@pixi/graphics-smooth (v7) | SilkGraphics (v8) | |
|---|---|---|
| PixiJS version | 7.x | 8.x |
| Class | SmoothGraphics | SilkGraphics |
| API style | beginFill, lineStyle, drawRect, endFill | shapes on a path, then fill() or stroke() |
| Anti-aliasing | in the shader, per line or shape | analytic signed distance fields, per pixel |
| Curves | tessellated | exact circles, ellipses, arcs, rounded corners |
| Extras | squircles, dashes, OKLab gradients, blur, tapered strokes, DPR-exact app |
Porting SmoothGraphics code#
// PixiJS v7 + @pixi/graphics-smooth
const g = new SmoothGraphics();
g.lineStyle({ width: 2, color: 0xffffff });
g.beginFill(0x1c1c1e);
g.drawRoundedRect(0, 0, 200, 80, 16);
g.endFill();
g.drawCircle(40, 40, 12);// PixiJS v8 + pixi-silk
const g = new SilkGraphics();
g.roundRect(0, 0, 200, 80, 16).fill(0x1c1c1e).stroke({ width: 2, color: 0xffffff });
g.circle(40, 40, 12).stroke({ width: 2, color: 0xffffff });| v7 call | SilkGraphics (v8) |
|---|---|
beginFill(c, a) to endFill() | shape().fill({ color: c, alpha: a }) |
lineStyle({ width, color, alpha }) | shape().stroke({ width, color, alpha }) |
drawRect, drawRoundedRect, drawCircle, drawEllipse | rect, roundRect, circle, ellipse |
moveTo, lineTo, bezierCurveTo | the same, then stroke() |
arc(...) | arc(...) (starts its own subpath) or arcSweep(...) |
LINE_SCALE_MODE.NONE (constant screen width) | not built in, so divide the width by the scale (hairlines never drop below 1 px) |
Also new in PixiJS v8#
PixiJS v8 itself changed the Graphics API. It adds GraphicsContext, and you now call fill() or
stroke() after the shapes. The PixiJS v8 migration guide
covers the rest of the upgrade. Migrating from Graphics covers how
v8 Graphics and SilkGraphics differ.
API reference: SilkGraphics