JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script>
JavaScript
// for this example you have to use mouse or touchscreen
var app = new PIXI.Application(800, 800);
document.body.appendChild(app.view);
app.renderer.backgroundColor = 0xc13a3a;
var stage = app.stage;
var centerContainer = new PIXI.Container();
stage.addChild(centerContainer);
centerContainer.position.x = app.screen.width/2;
centerContainer.position.y = app.screen.height/2;
//prepare circle texture, that will be our brush
var brush = new PIXI.Graphics();
brush.beginFill(0xffffff);
brush.drawCircle(0, 0, 50);
brush.endFill();
PIXI.loader.add("bg", "https://i.imgur.com/tGIn4hK.jpg")
PIXI.loader.add("toplayer", "https://i.imgur.com/7z28pCF.png")
PIXI.loader.add("bottomlayer", "https://i.imgur.com/sUylGOT.png")
PIXI.loader.add("mask", "https://i.imgur.com/UuGA7kp.png")
PIXI.loader.load(setup);
function setup(loader, resources) {
var background = new PIXI.Sprite(resources["bg"].texture);
centerContainer.addChild(background);
background.width = 600;
background.height = 700;
background.anchor.x = 0.5;
background.anchor.y = 0.5;
var onTopOfMask = new PIXI.Sprite(resources["toplayer"].texture);
centerContainer.addChild(onTopOfMask);
onTopOfMask.width = 500;
onTopOfMask.height = 362;
onTopOfMask.anchor.x = 0.5;
onTopOfMask.anchor.y = 0.5;
var imageToReveal = new PIXI.Sprite(resources["bottomlayer"].texture)
centerContainer.addChild(imageToReveal);
imageToReveal.width = 500;
imageToReveal.height = 362;
imageToReveal.anchor.x = 0.5;
imageToReveal.anchor.y = 0.5;
var renderTexture = PIXI.RenderTexture.create(400, 400);
// var renderTexture = PIXI.RenderTexture.fromImage(resources["mask"].texture);
var renderTextureSprite = new PIXI.Sprite(renderTexture);
centerContainer.addChild(renderTextureSprite);
renderTextureSprite.anchor.x = 0.5;
renderTextureSprite.anchor.y = 0.5;
imageToReveal.mask = renderTextureSprite;
centerContainer.interactive = true;
...