How to use the phaser.CANVAS function in phaser

var rootScope = {
	options:{
		width:300,
		height:300,
		where:'master-canvas'
	},
	debug:false // make sure set it to false when release
}

// @if !dist
require('./modules/stats')();
// @endif


var game = new Phaser.Game(rootScope.options.width, rootScope.options.height, Phaser.CANVAS, rootScope.options.where, rootScope.options.where);

game.state.add('game', require('./game')(game,rootScope));

// game.state.start('blank');
game.state.start('game');

window.onload = function() {
  // aspec ratio - (160/400)= 0,4
  var game = new Phaser.Game(400, 160, Phaser.CANVAS, '', 
    { init: init, preload: preload, create: create, update: update, render: render });

  var pixel = { scale: 4, canvas: null, context: null, width: 0, height: 0 };

  var hero;
  var cursors;
  var fps;

  function init() {
    // game screen scaling (renders to a backbuffer and copies to main canvas)
    // http://www.photonstorm.com/phaser/pixel-perfect-scaling-a-phaser-game

    //  Hide the un-scaled game canvas
    game.canvas.style['display'] = 'none';
    //  Create our scaled canvas. It will be the size of the game * whatever scale value you've set
    pixel.canvas = Phaser.Canvas.create(game.width * pixel.scale, game.height * pixel.scale);

constructor() {
    const {
      gameWidth,
      gameHeight,
      showStats
    } = Properties;

    // Create your Phaser game and inject it into the `#game-container` div.
    super(gameWidth, gameHeight, Phaser.CANVAS, 'game-container');

    // Add the States your game has.
    this.state.add('BootState', BootState);
    this.state.add('PreloaderState', PreloaderState);
    this.state.add('MainMenuState', MainMenuState);
    this.state.add('GameState', GameState);

    // Now start the Boot state.
    this.state.start('BootState');

    // Handle debug mode.
    if (__DEV__ && showStats) {
      this.setupStats();
    }
  }

constructor () {
    const docElement = document.documentElement
    const width = config.gameWidth
    const height = config.gameHeight

    super(width, height, Phaser.CANVAS, 'content', null)

    this.state.add('Boot', BootState, false)
    this.state.add('Game', GameState, false)
    this.state.start('Boot')

  }
}

import "../card-scripts/imports"

interface Props {
    playerId: string | undefined
    state: GameState | undefined
    setState: Function
    logAction: Function
}

const width = window.innerWidth - chatWidth
const height = window.innerHeight - 70

const config: Phaser.Types.Core.GameConfig = {
    parent: "phaser",
    backgroundColor: "#eee",
    type: Phaser.CANVAS,
    width,
    height,
    input: {
        mouse: true,
    },
    render: {
        roundPixels: true,
    },
    scale: {
        mode: Phaser.Scale.RESIZE,
    }
}

class Game extends React.Component {

    state: {

constructor () {
    const docElement = document.documentElement
    const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
    const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight

    super(width, height, Phaser.CANVAS, 'content', null)

    this.state.add('Boot', BootState, false)
    this.state.add('Splash', SplashState, false)
    this.state.add('Game', GameState, false)
    this.state.add('Win', WinState, false)

    this.state.start('Boot')
  }
}

constructor() {
		super(config.gameWidth * config.sizeFactor, config.gameHeight * config.sizeFactor, Phaser.CANVAS, 'content', null)

		this.state.add('Boot', BootState, false)
		this.state.add('Splash', SplashState, false)
		this.state.add('Intro', IntroState, false)
		this.state.add('Game', GameState, false)
		this.state.add('GameOver', GameOver, false)

		this.state.start('Boot')
	}
}

constructor () {
    const docElement = document.documentElement
    const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
    const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight

    super(width, height, Phaser.CANVAS, 'content', null, true, false)


    this.state.add('Boot', BootState, false)
    this.state.add('Loading', LoadingState, false)
    this.state.add('Splash', SplashState, false)
    this.state.add('Title', TitleState, false)
    this.state.add('Play', PlayState, false)
    this.state.add('Credits', CreditsState, false)
    this.state.add('Help', HelpState, false)
    this.state.add('Intro', IntroState, false)

    this.state.start('Boot')
  }
}