JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>fullscreen test</title>
</head>
<body>
	<div id="redfoc"><button id="button">Open Fullscreen</button></div>

</body>
</html>

CSS

body {
			background-color: #eee;
		}

JavaScript

var elem = document.getElementById("redfoc");
var btn = document.getElementById("button");
btn.addEventListener("click", function(){
	openFullscreen();
});

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}

class Game1 extends Phaser.Scene {
	constructor(){
		super('game')
	}
	create(){
		//
	}
}
var config1 = {
	type: Phaser.AUTO,
	width: 300,
	height: 500,
	parent: 'redfoc',
	scene: [Game1],
}
var game1 = new Phaser.Game(config1);