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.

Answer 3

Works with v5.1.5:

const app = new PIXI.Application({
  ...
  antialias: true,
  autoDensity: true, // !!!
  resolution: 2,
  ...
});

Answer 4

Also understand that graphics, when drawn by WebGL, uses the stencil buffer, which doesn't actually allow anti-aliasing. So if you want the drawn circle to be so, then covert what you have drawn into a texture and use that within a sprite instead.

http://pixijs.download/v4.3.4/docs/PIXI.Graphics.html#generateCanvasTexture