JSFiddle - React, Tailwind, and code Playground

by nt_pch

HTML

<script src="https://pixijs.github.io/examples/_site/js/pixi.js"></script>

JavaScript

var renderer = PIXI.autoDetectRenderer(400, 400, null);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
stage.name = 'stage';


var bg = new PIXI.Graphics();
bg.beginFill(0xFF0000, 1);
bg.drawRect(0, 0, 200, 200);
bg.name = 'bg';
stage.addChild(bg);

bg.interactive = true;
bg.buttonMode = true
bg.on('mousedown', bgDown);


var fg = new PIXI.Graphics();
fg.beginFill(0x00FF00, 1);
fg.drawRect(50, 50, 200, 200);
fg.name = 'fg';
fg.visible = false;
stage.addChild(fg);

fg.interactive = true;
fg.buttonMode = true
fg.on('mousedown', bgDown);


stage.interactive = true;


function bgDown(evt) {
    console.log('down - ' + evt.target.name);
    console.log(evt);
}


function animate() {
    renderer.render(stage);
    requestAnimationFrame(animate);
}
animate();