JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/pixijs/pixi.js/releases/download/v4.0.0-rc3/pixi.js"></script>
JavaScript
var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
document.body.appendChild(renderer.view);
// create the root of the scene graph
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.beginFill(0xFF0000, 1);
graphics.arc(renderer.width / 2, renderer.height / 2, 265, 0 * PIXI.DEG_TO_RAD, 100 * PIXI.DEG_TO_RAD);
graphics.lineTo(renderer.width / 2, renderer.height / 2);
graphics.endFill();
stage.addChild(graphics);
graphics.on('mousedown', function(){
graphics.clear();
graphics.beginFill(0x00FF00, 1);
graphics.drawRect(); // If you comment out this line, the example does not work
graphics.arc(renderer.width / 2, renderer.height / 2, 265, 0 * PIXI.DEG_TO_RAD, 100 * PIXI.DEG_TO_RAD);
graphics.lineTo(renderer.width / 2, renderer.height / 2);
graphics.endFill();
renderer.render(stage);
alert('yes it clicked');
});
renderer.render(stage);