<!Document html>
<html>
<head>
<script src="gamecontroller.js"></script>
<style>
html, body, canvas {
  margin: 0;
  padding: 0;
  border: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
function resize(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener(resize);
GameController.init();
</script>
</body>
</html>

<!Document html>
<html>
<head>
<script src="gamecontroller.js"></script>
<style>
html, body, canvas {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
function resize(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener(resize);
resize();

GameController.init({
  left: {
    type: 'joystick',
    position: { left: '15%', bottom: '15%' },
    joystick: {
      touchStart: function() {
        console.log('touch starts');
      },
      touchEnd: function() {
        console.log('touch ends');
      },
      touchMove: function( details ) {
        console.log( details.dx );
        console.log( details.dy );
        console.log( details.max );
        console.log( details.normalizedX );
        console.log( details.normalizedY );
      }
    }
  },
  right: {
    position: { right: '5%' },
    type: 'buttons',
    buttons: [{
        label: 'X',
        fontSize: 23,
        touchStart: function() {
          console.log('X start');
        }
      },
      false,
      false,
      false
    ]
  }
});
</script>
</body>
</html>

Test setup for joystick and a button.
Test setup for joystick and a button.
