Made a more good-looking html for the game canvas. It features auto-positioning of the canvas in center of screen with some jQuery. Could be useful
<!DOCTYPE html>
<html>
<head>
<title>New project</title>
<meta charset="UTF-8" />
<style type="text/css">
canvas { border: 1px solid black; }
body
{
background: #000;
}
#canvasBox
{
background: #616161;
border: 1px solid #8F8F8F;
padding: 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#canvasNotSupportedBox
{
font-family: "arial";
font-size: 12px;
text-align: center;
background: #818181;
color: #fff;
padding: 1em;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="c2runtime.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
pinCanvasOnCenter();
var project = new cr.runtime(document.getElementById("c2canvas"));
project.load();
project.go();
});
</script>
<script id="pinCanvasOnCenterScreenScript" type="text/javascript">
$(window).load(function(){
pinCanvasOnCenter();
});
$(window).resize(function(){
pinCanvasOnCenter();
});
$(window).resize();
function pinCanvasOnCenter()
{
$('#canvasBox').css({
position: 'absolute',
left: ($(window).width() - $('#canvasBox').outerWidth()) / 2,
top: ($(window).height() - $('#canvasBox').outerHeight()) / 2
});
}
</script>
</head>
<body>
<div id="canvasBox">
<canvas id="c2canvas" width="640" height="480">
<div id="canvasNotSupportedBox">
Sorry, your browser doesn't support Canvas!<br/>
<br/>
Please try with:
<a href="http://www.google.com/chrome">Chrome 9+</a>
<a href="http://www.mozilla.com/en-US/firefox/fx/">Firefox 4+</a>
<a href="http://nightly.webkit.org/">Safari 10.6+</a>
</div>
</div>
</div>
</body>
</html>
[/code:y0i4pa0j]