New Canvas Html

Discussion and feedback on Construct 2

Post » Tue Mar 29, 2011 8:28 pm

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 :)
[code:y0i4pa0j]
<!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]
B
58
S
13
G
10
Posts: 632
Reputation: 12,505

Post » Tue Mar 29, 2011 9:59 pm

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?
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Tue Mar 29, 2011 11:14 pm

Of course not :D
It'll look awesome with Construct logo below :D
B
58
S
13
G
10
Posts: 632
Reputation: 12,505


Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 3 guests