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]
Develop games in your browser. Powerful, performant & highly capable.
Hey, that's not bad (although it needs the preview scripts included to work as the preview HTML). Mind if we add something like this to the next build?
Of course not
It'll look awesome with Construct logo below