PixiJS Application Resize To Parent

Bare-bones example of a PixiJS Application in Fullscreen mode

by Matt Karl

HTML

<script src="https://pixijs.download/v4.7.0/pixi.min.js"></script>
<div id="frame"></div>

CSS

canvas {
  display:block;
}

#frame {
  /* Necessary to make sure frame width/height
  isn't set according to the canvas element */
  position: absolute;
  overflow: hidden;
  
  /* Optional stuff for positioning */
  top:50%;
  left:50%;
  width: 75%;
  height: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

JavaScript

const app = new PIXI.Application({
	autoResize: true,
  resolution: devicePixelRatio 
});
document.querySelector('#frame').appendChild(app.view);

// Lets create a red square, this isn't 
// necessary only to show something that can be position
// to the bottom-right corner
const rect = new PIXI.Graphics()
	.beginFill(0xff0000)
  .drawRect(-100, -100, 100, 100);
  
// Add it to the stage
app.stage.addChild(rect);

// Listen for window resize events
window.addEventListener('resize', resize);

// Resize function window
function resize() {

	// Get the p
	const parent = app.view.parentNode;
   
	// Resize the renderer
	app.renderer.resize(parent.clientWidth, parent.clientHeight);
  
  // You can use the 'screen' property as the renderer visible
  // area, this is more useful than view.width/height because
  // it handles resolution
  rect.position.set(app.screen.width, app.screen.height);
}

resize();