<footer><div id=version></div></footer>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

canvas {
  -display: block;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5)
}

/* global PhaserDebugGameScalePlugin, Phaser */
function preload() {
  this.load.image(
    "bg",
    "https://labs.phaser.io/assets/pics/sword-art-online.jpg"
  );
}

function create() {
  this.add.image(0, 0, "bg").setOrigin(0, 0);
}

new Phaser.Game({
  type: Phaser.CANVAS,
  backgroundColor: 0x555555,
  plugins: {
    global: [
      {
        key: "PhaserDebugGameScalePlugin",
        plugin: PhaserDebugGameScalePlugin,
        start: true
      }
    ]
  },
  scale: {
    width: 960,
    height: 600,
    mode: Phaser.Scale.FIT,
    min: { width: 480, height: 300 },
    max: { width: 1920, height: 1200 },
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: { preload, create }
});

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;