How to change the background color of a PixiJS application?

Oct 01, 20 / 0 comments / #Pixi.js

The default background color of a PixiJS application is black and boring. Here is how you can set it to whatever you want.

The code

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

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        
        <title>PixiJS Background Color</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // The application
            var app = new PIXI.Application({
                backgroundColor: 0x2980b9
            });

            // Add application to the DOM
            document.body.appendChild(app.view);
        </script>
    </body>
</html>

If you open up this file in your browser, you should see a nice blue colored square.

There isn't actually any magic going on here, you create the application and append it to the DOM the same way as always. The only difference is that we added a option to the "PIXI.Application". You can pass in any kind if HEX color here, just remember to prepend it with a "0x" instead of the typical "#".

How to change the background color of a PixiJS application?

The code

Comments