How Do I Antialias Graphics (Circle) in PixiJS?

Question

i've been having trouble getting a smooth circumference when i draw a circle using pixi js. I can already see a few corners when i draw big circles, and it gets so much worse when i size it down. (A small circle is what I need).

Here's the code:

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

Any help is greatly appreciated, let me know if you need some more info about my code. Thanks a lot!

Answer 1

Don't you just need to pass antialias:true to the startup params? See the docs

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
     antialias: true,  // ADDED!!!
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

Not sure what you're false, true arguments are at the end of your call to PIXI.autoDetectRenderer

You could also pass a higher number for resolution though you'll need to correctly set your CSS

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
     antialias: true,  // ADDED!!!
     resolution: 2,    // ADDED!!!
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

/* -- ADDED -- */
#animations-canvas {
  width: 300px;
  height: 150px;
}

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

Answer 2

In case you can't / won't use antialias on a renderer level, here's a little trick to antialias a specific graphic.

var radius = 20; 

// Create "intermediary" container for graphics
var gContainer = new PIXI.Container();
stage.addChild(gContainer);

var myCircle = new PIXI.Graphics();
gContainer.addChild(myCircle);

// Draw graphic x2 size
myCircle.beginFill(0xFF0000);
myCircle.drawCircle(0, 0, radius * 2);

// Use cacheAsBitmap to render bitmap 
gContainer.cacheAsBitmap = true;

// Scale down (the bitmap) to get smooth edges
gContainer.scale.set(0.5);

If you need to update your graphic, just set cacheAsBitmap = false, do the updates, and then set cacheAsBitmap = true again.

Do keep in mind a texture is rendered for each update, which is far less efficient than just redrawing the graphic itself.