The code
Create a new HTML file and add this code to it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS Size</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<style>* { margin: 0; padding: 0; }</style>
</head>
<body>
<script type="text/javascript">
// The application
var app = new PIXI.Application();
// 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 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.