Properly Changing Size of Pixijs Renderer

[LlamaTrauma]

Hello,

I am looking into game design, and decided to use the Pixi.js library for a project. The problem is that I am self-taught and unfamiliar with using Pixi. I am trying to resize a renderer created by the Pixi.autoDetectRenderer() method, but doing so messes up a simple background that I have loaded. I believe that the problem has to do with the order in which the program loads, because depending on how I open the website, the canvas may appear blank. When I attempt to load the website without resizing the canvas, the background loads well (when it loads at all). Any help would be appreciated. The small file containing my source code is attached. I apologize in advance for my ignorance!

 

javascriptSrc.txt

[ivan.popelyshev]

renderer.view.width = dims.w;
renderer.view.height = dims.h;

You changed HTML5 canvas element, not the pixi renderer settings.

If you search "resize" in this subforum or even in pixi docs, you'll see "renderer.resize" method. As a consequence, it changes canvas size.

[LlamaTrauma]

Thanks for the help! That fixed the scaling, and I realized that I had been calling the game loop incorrectly, which fixed the rendering problem.

[TinmanMonkeyFlayer]

This is golden! Been trying to prevent ctrl+mousezoom for almost a week. Now I just need to find out how to center the canvas with negative margins correctly!!