how to use container which stores circle graphics elements [pixijs]

Question

I would like to use PIXI.Graphics to create circle and put it on a PIXI.Container . I created a sprite which contains my background and thanks to background.mask , I would like to add circle to my container. I got no errors but when I display my canvas using app.view I got square instead of circle shape.

Dependencies:

"bootstrap": "^4.5.3",
"browserify": "^17.0.0",
"interactjs": "^1.10.0",
"jquery": "^3.5.1",
"jquery-ui": "^1.12.1",
"pixi-filters": "^3.1.1",
"pixi.js": "^5.3.3",
"watchify": "^3.11.1"

Node version: v10.19.0

Npm version: v6.14.4

I found this link: How to convert a graphic to a sprite in pixijs , that not worked for me.

The code bellow is inspired by pixijs doc: https://pixijs.io/examples/#/masks/filter.js

In this tuto, he used sprite and not container to make mask.

I show you my 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 = "xxx";

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;
}
})

canvas result:

Thank's in advance

Answer 1

https://pixijs.download/dev/docs/PIXI.Graphics.html#mask

... In PixiJS a regular mask must be a PIXI.Graphics or a PIXI.Sprite object. ...

It means that you probably cant use container as mask.

However, you can try other ways - like those for example:

• https://www.html5gamedevs.com/topic/43900-masking-an-image-with-multiple-blurred-circles/
• https://stackoverflow.com/a/53141831/3174731
• https://www.html5gamedevs.com/topic/37995-building-a-mask-from-multiple-sprites/