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
}
)
renderer.backgroundColor = 0xFFC0CB
let stage = new PIXI.Container()
let red = new PIXI.Graphics()
red.beginFill(0xff0000, 1.0)
red.drawRect(0, 0, 200, 200)
red.endFill()
let reverseMask = new PIXI.Container()
let circle = new PIXI.Graphics()
circle.beginFill(0x000000, 1)
circle.drawCircle(100, 100, 50)
circle.endFill()
reverseMask.addChild(circle)
reverseMask.filters = [new PIXI.filters.VoidFilter()]
reverseMask.filterArea = new PIXI.Rectangle(0, 0, 500, 500)
// GOAL: cut a circle out of the red square and see the pink background through it
stage.addChild(red)
stage.addChild(reverseMask)
renderer.render(stage)