Bug during export of filtered canvas

[WyllisMonteiro]

I have to use filter of pixi js like AdjustmentFilter. I got an issue with MAC, I initailised canvas, then I put effects when canvas is loaded. After adding green in filter variable I tied to export my canvas. I got a bad image as you can see bellow

// Basic image

// Exported canvas

//Some code

var W = window.innerWidth


$(document).ready(function() {

    const app = new PIXI.Application({
        width: W,
        height: W / 2
    });

    document.body.appendChild(app.view);

    // Inner radius of the circle
    const radius = 100;

    // The blur amount
    const blurSize = 32;

    app.loader.add('grass', 'grass.jpeg');
    app.loader.load(setup);

    function setup(loader, resources) {
        var containerBG = new PIXI.Container()  
        var containerBlur = new PIXI.Container()

        app.stage.addChild(containerBG);
        app.stage.addChild(containerBlur);

        const background2 = new PIXI.Sprite(resources.grass.texture);
        app.stage.addChild(background2);
        background2.width = W;
        background2.height = W / 2;
        containerBG.addChild(background2);

        var filter3 = new KawaseBlurFilter()
        filter3.blur = 12
        filter3.quality = 5

        var filter4 = new AdjustmentFilter()
        filter4.green = 5

        const background = new PIXI.Sprite(resources.grass.texture);
        background.width = W;
        background.height = W / 2;
        containerBG.addChild(background);
        background.filters = [filter4]

        var circle = new PIXI.Graphics()
            .beginFill(0xFF0000)
            .drawCircle(500, 500, radius)
            .endFill();

        containerBlur.addChild(circle)
        background.mask = containerBlur;

        var exportCanvas = app.renderer.plugins.extract.canvas(containerBG)
        console.log(exportCanvas.toDataURL("image/jpeg"))


        app.stage.interactive = true;
        app.stage.on('mousemove', pointerMove);

    }

})

If you need more details, I can gie you more, thank you in advance !

[ivan.popelyshev]

that's interesting. which browser on Mac is it, and which version of pixi?

[WyllisMonteiro]

Thank's for your help, I'm on firefox and pixijs version is 5.0.4. This bug is just on firefox.

[WyllisMonteiro]

Can someone have an idea or things to try ?

[ivan.popelyshev]

turn on "alpha:true" param in app options.

[WyllisMonteiro]

I will try it but in doc there is not this param : https://pixijs.download/v5.0.4/docs/PIXI.Application.html

I will try antialias param

[WyllisMonteiro]

I tried code bellow but it changes nothing. I tried filter KawaseBlurFilter which works well but if I put a mask I got this error with all filters. I think mask cause this bug.

I also look MAC version, it's OS X Yosemite version 10.10.2.

Is there a minimum version of MAC device for using PIXI

 

[ivan.popelyshev]

oh, i meant "transparent:true".

please put this thing on pixi-playground or codepen and i'll ask other people to check too

[WyllisMonteiro]

Transparent: true, not working too, so I created a codepen but I don't arrived to use pixi filter, I'm working on at link bellow : https://codepen.io/anon/pen/jgLedm?editors=1111

[ivan.popelyshev]

Maybe readPixels() doesnt work good on surfaces that are bigger than screen.

Usually it creates renderTexture with size of container you passed there, not the screen size. Lets unwrap canvas() and create/destroy renderTexture of appropriate size.

var renderTexture = PIXI.RenderTexture.create({ width: app.screen.width, height: app.screen.height, resolution: app.renderer.resolution });
app.renderer.render(containerBG, renderTexture);
var exportCanvas = app.renderer.plugins.extract.canvas(renderTexture);
renderTexture.destroy(true);

As in all other threads like that, I recommend to look inside "Extract" module if something goes wrong. That code is not difficult and you can make some of actions in your own code than relying on it.