JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/default.css">
</head>

<body>
    <script src="bundle.js"></script>
</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#pixi-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

JavaScript

const logicalWidth = 2048;
const logicalHeight = 1024;

// Init Application
let app = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio || 1, autoResize: true });

app.view.id = 'pixi-canvas';

// Add canvas to DOM
document.body.appendChild(app.view);

PIXI.loader
    .add('bg', 'https://i.imgur.com/USY74KX.png')
    .load(() => loadGame());


function loadGame() {
  let background = PIXI.Sprite.fromImage("bg");
  
  app.stage.addChild(background);
  
  resizeHandle();
}

function resizeHandler(stage, renderer, logicalHeight, logicalWidth) {
        const scaleFactor = Math.min(
            window.innerWidth / logicalWidth,
            window.innerHeight / logicalHeight
        );

        const newWidth = Math.ceil(logicalWidth * scaleFactor);
        const newHeight = Math.ceil(logicalHeight * scaleFactor);

        renderer.resize(newWidth, newHeight);
        stage.scale.set(scaleFactor);
};