JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>

<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>

JavaScript

var app = new PIXI.Application(400, 300, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/pixijs/examples/gh-pages/required/assets/bunny.png');

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
// create a containter to add bunny
var dummyContainer = new PIXI.Container();
// add bunny
dummyContainer.addChild(bunny);
/*
bunny.renderWebGL = function(){
  console.log("argh");
};
*/
// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent transformation
    bunny.rotation += 0.1 * delta;
  // manual update and render
  bunny.updateTransform();
  bunny.renderWebGL(app.renderer);
});