How to change the size of a PixiJS application

/ #PixiJS

A PixiJS application has a default size. But what if you want to size to match the window or you just want a completely different size?

The code

Create a new HTML file and add this code to it:

<!DOCTYPE html>

        <meta charset="utf-8">
        <title>PixiJS Size</title>

        <script src=""></script>
        <style>* { margin: 0; padding: 0; }</style>
        <script type="text/javascript">
            // The application
            var app = new PIXI.Application();

            // Add application to the DOM

If you open up this file in your browser, you should see a big black square. That's perfect, because then we know that PixiJS has loaded correctly.

Setting a custom size

Above the line where we create the variable "app", add these two lines:

var width = 400;
var height = 200;

But we also need to tell the application that we want to use these two variables. Change the "app" variable so it looks like this:

var application = new PIXI.Application({
    width: width,
    height: height

If you go back to the browser again and refresh, the black square will be 400px wide and 200px tall.

A full screen application

Sometimes you want the size to match the screen size, that's fairly easy to do. Just change the two width and height variables to look like this:

var width = window.innerWidth;
var height = window.innerHeight;

If you go back to the browser again and refresh, the window will now fill up the entire screen.


No comments yet...

Add comment

Subscribe to my newsletter