pixi.stage.width and pixi.stage.height take a scaling factor at the beginning, but take concrete pixel values on later usage

[Reilaen]

Hi everyone,

I am having some trouble figuring out what I am doing wrong and hope someone can help me out here.

What I try to achieve:
To resize a renderer and container according to the limits of an HTML element without care if the result gets distorted or not.

What my problem is:
I use the resize function to set pixi.stage.width and pixi.stage.height to the HTML element's clientWidth and clientHeight, and also resize the pixi.renderer to the HTML element's dimension.

Upon loading the page, I only see a blue canvas, but when I change the window size it works as intended.

I found out that the reason for this is, that pixi.stage.width and pixi.stage.height take a scaling factor in the first execution of resize, but upon a resize via a window.onresize they take concrete pixel values.

What my goal is:
I don't care if I have to put in the pixel values or have to calculate a factor, but I would like to use one method for resizing the renderer and stage the first time and one every resize.

That is how my current code looks:

import * as PIXI from 'pixi.js'

const mainNode = document.getElementById('main')

const pixi = new PIXI.Application({
  resolution: window.devicePixelRatio || 1,
  antialias: true,
  autoDensity: true,
  roundPixels: true
})

const background = PIXI.Sprite.from('./images/gate_tag.jpg')
pixi.stage.addChild(background)

mainNode.appendChild(pixi.view)

resize(pixi)

window.onresize = () => {
  resize(pixi)
}

export function resize(pixi) {
  pixi.stage.width = mainNode.clientWidth
  pixi.stage.height = mainNode.clientHeight

  pixi.renderer.resize(mainNode.clientWidth, mainNode.clientHeight)
}

 

[znw-test]

Have you tried setting up resizeTo?

pixi.resizeTo = mainNode

[Reilaen]

Yes, but it only resizes the renderer to fit the html element, the rendered content doesn't get resized.
What I want to do is to have the canvas always fill the html element and resize itself, and it's content accordingly.

Edited November 23, 2022 by Reilaen