title: how to use container which stores circle graphics elements [pixijs]
body: <p>I would like to use <code>PIXI.Graphics</code> to create circle and put it on a <code>PIXI.Container</code>.
  I created a sprite which contains my background and thanks to <code>background.mask</code>, I would like to add circle to my container. I got no errors but when I display my canvas using <code>app.view</code> I got square instead of circle shape.</p>
  <p>Dependencies :</p>
  <pre><code>&quot;bootstrap&quot;: &quot;^4.5.3&quot;,
  &quot;browserify&quot;: &quot;^17.0.0&quot;,
  &quot;interactjs&quot;: &quot;^1.10.0&quot;,
  &quot;jquery&quot;: &quot;^3.5.1&quot;,
  &quot;jquery-ui&quot;: &quot;^1.12.1&quot;,
  &quot;pixi-filters&quot;: &quot;^3.1.1&quot;,
  &quot;pixi.js&quot;: &quot;^5.3.3&quot;,
  &quot;watchify&quot;: &quot;^3.11.1&quot;
  </code></pre>
  <p>Node version : v10.19.0</p>
  <p>Npm version : v6.14.4</p>
  <p>I found this link : <a href="https://stackoverflow.com/questions/50940737/how-to-convert-a-graphic-to-a-sprite-in-pixijs">How to convert a graphic to a sprite in pixijs</a>, that not worked for me.</p>
  <p>The code bellow is inspired by pixijs doc : <a href="https://pixijs.io/examples/#/masks/filter.js" rel="nofollow noreferrer">https://pixijs.io/examples/#/masks/filter.js</a></p>
  <p>In this tuto, he used sprite and not container to make mask.</p>
  <p>I show you my code</p>
  <pre><code>var PIXI = require('pixi.js')
  
  $(function() {
      const app = new PIXI.Application({
          width: 800,
          height: 600,
          backgroundColor: 0x000000,
          resolution: window.devicePixelRatio || 1,
      });
  
  document.body.appendChild(app.view);
  
  // Inner radius of the circle
  const radius = 100;
  
  // The blur amount
  const blurSize = 32;
  const pathImg = &quot;xxx&quot;;
  
  app.loader.add('grass', pathImg);
  app.loader.load(setup);
  
  function setup(loader, resources) {
      const background = new PIXI.Sprite(resources.grass.texture);
      background.width = app.screen.width;
      background.height = app.screen.height;
  
      var cricle1 = createCircle(100, 100);
      var cricle2 = createCircle(400, 400);
  
      let containerBlur = new PIXI.Container();
      containerBlur.addChild(cricle1);
      containerBlur.addChild(cricle2);
  
      app.stage.addChild(background);
      app.stage.addChild(containerBlur);
      background.mask = containerBlur;
  }
  
  function createCircle(x, y) {
      var brushBlur = new PIXI.Graphics()
          .beginFill(0xff0000, 1)
          .drawCircle(radius + blurSize, radius + blurSize, radius)
          .endFill();
      brushBlur.filters = [new PIXI.filters.BlurFilter(blurSize)];
  
      const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
      var texture = app.renderer.generateTexture(brushBlur, PIXI.SCALE_MODES.NEAREST, 1, bounds);
      var sprite = new PIXI.Sprite(texture);
      sprite.position.x = x;
      sprite.position.y = y;
      return sprite;
  }
  })
  </code></pre>
  <p>canvas result :</p>
  <p><a href="https://i.stack.imgur.com/HGyc4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGyc4.png" alt="result" /></a></p>
  <p>Thank's in advance</p>