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;

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

PIXI.loader.add("https://pixijs.github.io/examples/required/assets/BGrotate.jpg")
PIXI.loader.load(setup);

function setup()
{
  var imageToRevealImg = PIXI.loader.resources["https://pixijs.github.io/examples/required/assets/BGrotate.jpg"].texture;
  var imageToReveal = new PIXI.Sprite(imageToRevealImg)
  stage.addChild(imageToReveal)

  var renderTexture = PIXI.RenderTexture.create(imageToReveal.width, imageToReveal.height);
  var graphicsContainer = new PIXI.Sprite();
  stage.addChild(graphicsContainer)
  var drawnShapes = new PIXI.Sprite();
  stage.addChild(drawnShapes)

  imageToReveal.mask = graphicsContainer;

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

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

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