JSFiddle - React, Tailwind, and code Playground

by jeroen511

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;

PIXI.loader.add("t1", "https://pixijs.github.io/examples/required/assets/bkg-grass.jpg")
PIXI.loader.add("t2", "https://pixijs.github.io/examples/required/assets/BGrotate.jpg")
PIXI.loader.load(setup);

function setup(loader, resources) {
  var imageToReveal = new PIXI.Sprite(resources["t1"].texture);
  stage.addChild(imageToReveal)

  var renderTexture = PIXI.RenderTexture.create(imageToReveal.width, imageToReveal.height);
  var graphicsContainer = new PIXI.particles.ParticleContainer(1500, { scale: false, position: true, rotation: false});
  var drawnShapes = new PIXI.Sprite();
  stage.addChild(drawnShapes)

  imageToReveal.mask = drawnShapes;

  var graphics = new PIXI.Graphics();
  graphics.beginFill(0xffffff);
  graphics.drawCircle(0, 0, 50);
  graphics.endFill(); 
  var circleBase = graphics.generateCanvasTexture(1).baseTexture;
  var circleTex = new PIXI.Texture(circleBase);

  app.view.addEventListener('pointerdown', mouseDown);

  function mouseDown(event)
  {
      var	mouseX = event.clientX;
      var	mouseY = event.clientY;
      console.log(renderTexture)

      var dot = new PIXI.Sprite(circleTex);
      dot.x = mouseX;
      dot.y = mouseY;
      dot.anchor.set(.5)
      graphicsContainer.addChild(dot);

      app.renderer.render(graphicsContainer, renderTexture, false, null, false);
      drawnShapes.texture = renderTexture;
  }
}