New Canvas Html

Post reply

❤Follow Topic(2)

Email subscribe

0 favourites

3 posts

RayKst
- Joined 22 Jul, 2009
- 40 topics • 632 posts
1

29 Mar, 2011
Quote

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]

Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- Ashley Construct Team Founder
- Moderator
- - Joined 21 May, 2007
  - 652 topics • 28,360 posts
- 1
- 29 Mar, 2011
- Quote
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?
- RayKst
- - Joined 22 Jul, 2009
  - 40 topics • 632 posts
- 1
- 29 Mar, 2011
- Quote
Of course not

It'll look awesome with Construct logo below