JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script>

CSS

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: lightslategrey;
}

canvas {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

JavaScript

const width = 512;
const height = 512;

const appOptions = {  
  width: width,
  height: height,
  resolution: window.devicePixelRatio,
  roundPixels: true,
  transparent: false,
  backgroundColor: 0x555555,
};

const app = new PIXI.Application(appOptions);
document.body.appendChild(app.view);

coolResize();
app.ticker.add(coolResize);

drawSquare();
drawSquare(app.view.width / 2 - 25, app.view.height / 2 - 25);


function coolResize() {  
  const multiplier = app.renderer.options.resolution || 1;
  const clientWidth = Math.floor(app.view.clientWidth * multiplier);
  const clientHeight = Math.floor(app.view.clientHeight * multiplier);

  if (app.view.width !== clientWidth || app.view.height !== clientHeight) {
    app.view.width = clientWidth;
    app.view.height = clientHeight;    
        
    return true;
  }

  return false;
}

function drawSquare(x = 0, y = 0) {
  const graphics = new PIXI.Graphics();
  graphics.lineStyle(2, 0xFF00FF, 1);
  graphics.beginFill(0xFF00BB, 0.25);
  graphics.drawRoundedRect(x, y, 50, 50, 10);
  graphics.endFill();

  app.stage.addChild(graphics);
}