JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js"></script>
<canvas id='main-canvas'></canvas>
JavaScript
let renderer = PIXI.autoDetectRenderer(
window.innerWidth,
window.innerHeight,
{
view: document.getElementById('main-canvas'),
antialiasing: false,
transparent: false,
resolution: 1
}
)
//hacked clearing blendmode
renderer.state.blendModes[20] = [0, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA];
renderer.backgroundColor = 0xFFC0CB
let stage = new PIXI.Container()
let poison = new PIXI.Container();
let red = new PIXI.Graphics()
red.beginFill(0xff0000, 1.0)
red.drawRect(0, 0, 200, 200)
red.endFill()
let circle = new PIXI.Graphics()
circle.beginFill(0x000000, 1)
circle.drawCircle(100, 100, 50)
circle.endFill()
circle.blendMode = 20;
poison.addChild(red);
poison.addChild(circle);
// we've renamded VoidFilter
poison.filters = [new PIXI.filters.AlphaFilter()];
stage.addChild(poison);
renderer.render(stage)