<div id="container">
  <div id="phaserdiv"></div>
</div>

#container{
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

class MainScene extends Phaser.Scene {
  constructor(){
    super('mainScene');
  }

  preload(){
      this.load.image('bg', 'assets/pics/uv-grid-diag.png');
  }// End preload

  create(){    
      // Image of size 1024x1024
      const bg = this.add.image(150,150,'bg');
    
      // Second camera
      this.camera2 = this.cameras.add(20,20,260,260)
          .setOrigin(0)
          .setScroll(20,20)
          .setBounds(150 - bg.width / 2, 150 - bg.height / 2, bg.width, bg.height);
    
      
      const txt = this.add.text(150,150,'use cursors to move', {fontSize: 20}).setOrigin(0.5);
    
      // Main camera ignores bg image to get the frame effect
      this.cameras.main.ignore(bg);
      // Camera2 ignores text label
      this.camera2.ignore(txt);
    
      // Brings main camera to top
      this.cameras.cameras.push(this.cameras.cameras.shift());
      
      this.cursors = this.input.keyboard.createCursorKeys();
  }//End create
  
  update(){
      if(this.cursors.right.isDown){
          this.camera2.scrollX += 4;
      } else if(this.cursors.left.isDown){
          this.camera2.scrollX -= 4;
      }
    
      if(this.cursors.up.isDown){
          this.camera2.scrollY -= 4;
      } else if(this.cursors.down.isDown){
          this.camera2.scrollY += 4;
      }    
  }//End update

}// End class

var config = {
    type: Phaser.WEBGL,
    width: 300,
    height: 300,
    parent: 'phaserdiv',
    scene: [MainScene],
    loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

var game = new Phaser.Game(config);