JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://pixijs.download/v4.5.2/pixi.min.js"></script>
JavaScript
var app = new PIXI.Application(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);
var stage = app.stage;
var graphic = new PIXI.Graphics();
graphic.beginFill(0xffffff);
graphic.drawCircle(0, 0, 50);
graphic.endFill();
var circleBaseTex = graphic.generateCanvasTexture(1).baseTexture;
var circleTex = new PIXI.Texture(circleBaseTex);
PIXI.loader.add("https://pixijs.github.io/examples/required/assets/bkg-grass.jpg")
PIXI.loader.add("https://pixijs.github.io/examples/required/assets/BGrotate.jpg")
PIXI.loader.load(setup);
function setup()
{
var bgImage = PIXI.loader.resources["https://pixijs.github.io/examples/required/assets/bkg-grass.jpg"].texture;
var bgGraphic = new PIXI.Sprite(bgImage);
stage.addChild(bgGraphic)
var container = new PIXI.Sprite();
stage.addChild(container);
var imageToRevealImg = PIXI.loader.resources["https://pixijs.github.io/examples/required/assets/BGrotate.jpg"].texture;
var imageToReveal = new PIXI.Sprite(imageToRevealImg)
container.addChild(imageToReveal)
var renderTexture = PIXI.RenderTexture.create(imageToReveal.width, imageToReveal.height);
var graphic = new PIXI.Graphics();
graphic.beginFill(0);
graphic.drawRect(0, 0, renderTexture.width, renderTexture.height)
graphic.endFill();
//app.renderer.render(graphic, renderTexture);
var renderTextureSprite = new PIXI.Sprite(renderTexture);
container.addChild(renderTextureSprite);
//renderTextureSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
container.mask = renderTextureSprite;
app.view.addEventListener('pointerdown', mouseDown);
function mouseDown(event) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var dot = new PIXI.Sprite(circleTex);
dot.x = mouseX;
dot.y = mouseY;
dot.anchor.set(.5)
app.renderer.render(dot, renderTexture, false, null, false);
renderTextureSprite.texture = renderTexture;
}
}