Edit in JSFiddle

var app = null;

window.onload = function() {
utils.loadShaderXml("src/render/shaders.xml", null, function(shaders) {
if (shaders instanceof Exception) {
app = shaders;
} else {
try {
app = new App('canvas', shaders, null);
} catch (e) {
app = e;
}
}
});

            document.onselectstart = function () {
                return false;
            };
};

function application() {
if (app == null) {
alert("Application is absent");
throw "no application";
} else if (app instanceof Exception) {
alert("An exception occured while creating the application:\n" + app.message);
throw app;
} else {
return app;
}
}
<head>
<title>Emberwind</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
<link rel="apple-touch-icon-precomposed" href="icon_57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon_72x72.png" >
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon_114x114.png" >

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Allan:700&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Meddon&v2' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:700italic&subset=latin,cyrillic,latin-ext' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="src/Common.js"></script>
<script type="text/javascript" src="src/Perlin.js"></script>
<script type="text/javascript" src="src/ChaikinCurve.js"></script>

<script type="text/javascript" src="src/render/Render.js"></script>
<script type="text/javascript" src="src/render/RenderCanvas.js"></script>
<script type="text/javascript" src="src/render/RenderWebGL.js"></script>
<script type="text/javascript" src="src/render/Utils.js"></script>
<script type="text/javascript" src="src/render/glMatrix.js"></script>
<script type="text/javascript" src="src/render/webgl-utils.js"></script>

<script type="text/javascript" src="src/Audio.js"></script>
<script type="text/javascript" src="src/Animation.js"></script>
<script type="text/javascript" src="src/Collision.js"></script>
<script type="text/javascript" src="src/Movement.js"></script>
<script type="text/javascript" src="src/Trigger.js"></script>
<script type="text/javascript" src="src/ParticleSystem.js"></script>
<script type="text/javascript" src="src/DialogueSystem.js"></script>
<script type="text/javascript" src="src/GameObjects.js"></script>
<script type="text/javascript" src="src/HittableObject.js"></script>

<script type="text/javascript" src="src/PlayerCharacter.js"></script>
<script type="text/javascript" src="src/Gremlin.js"></script>
<script type="text/javascript" src="src/CaveEntrance.js"></script>
<script type="text/javascript" src="src/House.js"></script>
<script type="text/javascript" src="src/Pickup.js"></script>
<script type="text/javascript" src="src/Breakables.js"></script>
<script type="text/javascript" src="src/GremlinBasket.js"></script>

<script type="text/javascript" src="src/ResourceClasses.js"></script>
<script type="text/javascript" src="src/ResourceDepot.js"></script>
<script type="text/javascript" src="src/Stage.js"></script>
<script type="text/javascript" src="src/StageClasses.js"></script>

<script type="text/javascript" src="src/GUIButtons.js"></script>
<script type="text/javascript" src="src/GUIHeadsUp.js"></script>
<script type="text/javascript" src="src/FSM.js"></script>
<script type="text/javascript" src="src/Game.js"></script>
<script type="text/javascript" src="src/Input.js"></script>
<script type="text/javascript" src="src/AppStates.js"></script>
<script type="text/javascript" src="src/App.js"></script>
<script type="text/javascript" src="src/GremlinStates.js"></script>
<script type="text/javascript" src="src/PCStates.js"></script>
<script type="text/javascript" src="src/Wick.js"></script>
<script type="text/javascript" src="src/TutorialTip.js"></script>
<script type="text/javascript" src="src/Villager.js"></script>
<script type="text/javascript" src="src/Lamppost.js"></script>

</head>
<body>
<div id="canvas-holder" class="inactive">
<div id="canvas">Emberwind is loading...</div>
</div>
<div style="font-family: Lobster; visibility: hidden">one</div>
<div style="font-family: Allan; visibility: hidden">two</div>
<div style="font-family: Meddon; visibility: hidden">three</div>
<div style="font-family: Cuprum; visibility: hidden">four</div>
</body>

body{
margin: 0px; padding: 0px; overflow: hidden;
background: #000;
}
#canvas-holder.active {
position: absolute;
padding: 0px;
left: 50%;
top: 50%;
}

#canvas-holder.inactive {
position: absolute;
top:50%;
width: 100%;
text-align: center;
}

#canvas {
padding: 0px;
width: 100%;
height: 100%;
color: #fff;
font-family: Allan, Arial;
font-size: 40px;
}