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:

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>