How to change the background color of a PixiJS application?

/ #PixiJS


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 "#".


Comments

No comments yet...

Add comment

Subscribe to my newsletter