JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js"></script>
JavaScript
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/14/BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
stage.addChild(bg);
var panda = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/14/panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
panda.position.x = 620 / 2;
panda.position.y = 380 / 2;
stage.addChild(panda);
var renderer = PIXI.autoDetectRenderer(620, 380);
renderer.view.style.position = "absolute"
renderer.view.style.marginLeft = "-310px";
renderer.view.style.marginTop = "-190px";
renderer.view.style.top = "50%";
renderer.view.style.left = "50%";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
var thing = new PIXI.Graphics();
var paths = [562, 74, 555, 77, 550, 82, 545, 90, 543, 96, 536, 113, 541, 144, 557, 158, 602, 170, 621, 172, 630, 174, 648, 161, 649, 141, 647, 114, 638, 88];
stage.addChild(thing);
panda.mask = thing;
//panda.addChild(thing);
stage.mousemove = function (interactionData) {
var global = interactionData.global;
panda.x = global.x;
panda.y = global.y;
}
requestAnimFrame(animate);
function animate() {
thing.clear();
thing.beginFill(0x8bc5ff, 0.4);
thing.drawPath(paths);
thing.endFill();
renderer.render(stage);
requestAnimFrame(animate);
}