Pixi’s Graphic Primitives

Using image textures is one of the most useful ways of making sprites, but Pixi also has its own low-level drawing tools. You can use them to make rectangles, shapes, lines, complex polygons and text. And, fortunately, it uses almost the same API as the Canvas Drawing API so, if you’re already familiar with canvas, there’s nothing really new to learn. But the big advantage is that, unlike the Canvas Drawing API, the shapes you draw with Pixi are rendered by WebGL on the GPU. Pixi lets you access all that untapped performance power. Let’s take a quick tour of how to make some basic shapes. Here are all the shapes we’ll make in the code ahead.

Graphic primitives

Rectangles

All shapes are made by first creating a new instance of Pixi’s Graphics class (PIXI.Graphics).

  1. let rectangle = new Graphics();

Use beginFill with a hexadecimal color code value to set the rectangle’ s fill color. Here’ how to set to it to light blue.

  1. rectangle.beginFill(0x66CCFF);

If you want to give the shape an outline, use the lineStyle method. Here’s how to give the rectangle a 4 pixel wide red outline, with an alpha value of 1.

  1. rectangle.lineStyle(4, 0xFF3300, 1);

Use the drawRect method to draw the rectangle. Its four arguments are x, y, width and height.

  1. rectangle.drawRect(x, y, width, height);

Use endFill when you’re done.

  1. rectangle.endFill();

It’s just like the Canvas Drawing API! Here’s all the code you need to draw a rectangle, change its position, and add it to the stage.

  1. let rectangle = new Graphics();
  2. rectangle.lineStyle(4, 0xFF3300, 1);
  3. rectangle.beginFill(0x66CCFF);
  4. rectangle.drawRect(0, 0, 64, 64);
  5. rectangle.endFill();
  6. rectangle.x = 170;
  7. rectangle.y = 170;
  8. app.stage.addChild(rectangle);

This code makes a 64 by 64 blue rectangle with a red border at an x and y position of 170.

Circles

Make a circle with the drawCircle method. Its three arguments are x, y and radius

  1. drawCircle(x, y, radius)

Unlike rectangles and sprites, a circle’s x and y position is also its center point. Here’s how to make a violet colored circle with a radius of 32 pixels.

  1. let circle = new Graphics();
  2. circle.beginFill(0x9966FF);
  3. circle.drawCircle(0, 0, 32);
  4. circle.endFill();
  5. circle.x = 64;
  6. circle.y = 130;
  7. app.stage.addChild(circle);

Ellipses

As a one-up on the Canvas Drawing API, Pixi lets you draw an ellipse with the drawEllipse method.

  1. drawEllipse(x, y, width, height);

The x/y position defines the center of the ellipse. Here’s a yellow ellipse that’s 100 pixels wide and 40 pixels high.

  1. let ellipse = new Graphics();
  2. ellipse.beginFill(0xFFFF00);
  3. ellipse.drawEllipse(0, 0, 50, 20);
  4. ellipse.endFill();
  5. ellipse.x = 180;
  6. ellipse.y = 130;
  7. app.stage.addChild(ellipse);

Rounded rectangles

Pixi also lets you make rounded rectangles with the drawRoundedRect method. The last argument, cornerRadius is a number in pixels that determines by how much the corners should be rounded.

  1. drawRoundedRect(x, y, width, height, cornerRadius)

Here’s how to make a rounded rectangle with a corner radius of 10 pixels.

  1. let roundBox = new Graphics();
  2. roundBox.lineStyle(4, 0x99CCFF, 1);
  3. roundBox.beginFill(0xFF9933);
  4. roundBox.drawRoundedRect(0, 0, 84, 36, 10)
  5. roundBox.endFill();
  6. roundBox.x = 48;
  7. roundBox.y = 190;
  8. app.stage.addChild(roundBox);

Lines

You’ve seen in the examples above that the lineStyle method lets you define a line. You can use the moveTo and lineTo methods to draw the start and end points of the line, in just the same way you can with the Canvas Drawing API. Here’s how to draw a 4 pixel wide, white diagonal line.

  1. let line = new Graphics();
  2. line.lineStyle(4, 0xFFFFFF, 1);
  3. line.moveTo(0, 0);
  4. line.lineTo(80, 50);
  5. line.x = 32;
  6. line.y = 32;
  7. app.stage.addChild(line);

PIXI.Graphics objects, like lines, have x and y values, just like sprites, so you can position them anywhere on the stage after you’ve drawn them.

Polygons

You can join lines together and fill them with colors to make complex shapes using the drawPolygon method. drawPolygon‘s argument is a path array of x/y points that define the positions of each point on the shape.

  1. let path = [
  2.   point1X, point1Y,
  3.   point2X, point2Y,
  4.   point3X, point3Y
  5. ];
  7. graphicsObject.drawPolygon(path);

drawPolygon will join those three points together to make the shape. Here’s how to use drawPolygon to connect three lines together to make a red triangle with a blue border. The triangle is drawn at position 0,0 and then moved to its position on the stage using its x and y properties.

  1. let triangle = new Graphics();
  2. triangle.beginFill(0x66FF33);
  4. //Use `drawPolygon` to define the triangle as
  5. //a path array of x/y positions
  7. triangle.drawPolygon([
  8.     -32, 64,             //First point
  9.     32, 64,              //Second point
  10.     0, 0                 //Third point
  11. ]);
  13. //Fill shape's color
  14. triangle.endFill();
  16. //Position the triangle after you've drawn it.
  17. //The triangle's x/y position is anchored to its first point in the path
  18. triangle.x = 180;
  19. triangle.y = 22;
  21. app.stage.addChild(triangle);