How to Draw Circles and Ellipses in Pixi.js

This article provides a direct guide on how to render circles and ellipses using the Pixi.js Graphics utility. You will learn the specific API methods required, their parameter configurations, and see clear code examples to implement these geometric shapes in your application.

To draw shapes in Pixi.js, you must first instantiate a PIXI.Graphics object. This object contains the drawing context and methods required to define vector shapes, fills, and stroke styles.

Drawing a Circle with drawCircle

The standard method for rendering a circle is drawCircle(). This method defines a circle based on its center coordinates and radius.

Syntax

graphics.drawCircle(x, y, radius);

Parameters

• x: The X-coordinate of the center point of the circle.
• y: The Y-coordinate of the center point of the circle.
• radius: The distance from the center to the outer edge.

Code Example

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();

// Define fill color (red)
graphics.beginFill(0xDE3249);

// Draw circle at x: 150, y: 150, with a radius of 50
graphics.drawCircle(150, 150, 50);

graphics.endFill();
app.stage.addChild(graphics);

Drawing an Ellipse with drawEllipse

To draw an ellipse (a stretched or squished circle), Pixi.js provides the drawEllipse() method.

Syntax

graphics.drawEllipse(x, y, halfWidth, halfHeight);

Parameters

• x: The X-coordinate of the center point of the ellipse.
• y: The Y-coordinate of the center point of the ellipse.
• halfWidth: The horizontal radius (semi-major axis).
• halfHeight: The vertical radius (semi-minor axis).

Code Example

import * as PIXI from 'pixi.js';

const graphics = new PIXI.Graphics();

// Define fill color (blue)
graphics.beginFill(0x3500D3);

// Draw ellipse at x: 400, y: 150, with a horizontal radius of 80 and vertical radius of 40
graphics.drawEllipse(400, 150, 80, 40);

graphics.endFill();
app.stage.addChild(graphics);

Adding Borders to Circles and Ellipses

To add an outline (stroke) to either shape, use the lineStyle() method before calling the draw commands.

const graphics = new PIXI.Graphics();

// Set line style: 4px width, color white, 100% opacity
graphics.lineStyle(4, 0xFFFFFF, 1);
graphics.beginFill(0x650A5A);

// Draw a circle with a border
graphics.drawCircle(300, 300, 60);

graphics.endFill();
app.stage.addChild(graphics);