Jazzing up the example

example/public/javascripts/game.js

@@ -5,25 +5,31 @@ $(function () {
     var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(),
         playerSize = 0, entitySize = 0;
 
+    window.addEventListener('resize', resizeCanvas, false);
+
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', {
         logging: true,
         onReady: startGame,
         onUpdatePlayerPrediction: GamePhysics.getNewPlayerState,
         onInterpolation: GamePhysics.getInterpolatedState,
         onWorldState: function (state) {
-            document.getElementById('gameCanvas').style.width = state.width + 'px';
-            document.getElementById('gameCanvas').style.height = state.height + 'px';
             playerSize = state.playerSize;
             entitySize = state.entitySize;
         }
     });
 
+    function resizeCanvas() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+
+    resizeCanvas();
     function startGame() {
         GameLoop.start(
             //Render Loop
             function () {
                 ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
-
+                ctxCanvas.fillStyle = 'white';
                 var playerStates = GarageServerIO.getPlayerStates(),
                     entityStates = GarageServerIO.getEntityStates();
                 playerStates.forEach(function (player) {

example/public/stylesheets/style.css

@@ -1,16 +1,21 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    background-color: #001429;
+}
+
 #gameCanvas {
-    outline: 1px solid black;
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: auto;
-    margin-right: auto;
+    background-color: #001429;
+    background: -webkit-gradient(linear, left top, left bottom, from(#000306), to(#001429));
+    background: -moz-linear-gradient(top, #000306 0%, #001429 100%);
     display: block;
 }
 
-#fps {
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    width: 800px;
-}