Resizing the PixiJS stage according to the page size

PixiJSResize.js

import * as PIXI from 'pixi.js'

import backgroundImageURL from '/assets/images/background.jpg'

const application = new PIXI.Application()

const screenW = 1024
const screenH = 1024

const resize = () => {
  const clientW = application.view.parentNode.clientWidth
  const clientH = application.view.parentNode.clientHeight

  const scale = (clientW < clientH) ? clientW / screenW : clientH / screenH

  application.renderer.resize(clientW, clientH)
  application.stage.x = clientW / 2
  application.stage.y = clientH / 2
  application.stage.scale.x = scale
  application.stage.scale.y = scale
}

document.body.appendChild(application.view)
// resize()

application.loader.add('background', backgroundImageURL).load((loader, resources) => {
  const background = new PIXI.Sprite(resources.background.texture)

  background.anchor.x = 0.5
  background.anchor.y = 0.5

  background.scale.x = screenW / 670
  background.scale.y = screenH / 670

  application.stage.addChild(background)

  application.ticker.add(delta => {
    resize()
  })
})

// window.addEventListener('resize', resize)