New Canvas Html

Post reply

❤Follow Topic(2)

0 favourites

3 posts

From the Asset Store

Gif

Pixel Destruction of the Drawing Canvas

$5 USD

Pixel Destruction like in "Worms" (Drawing Canvas based)

Aventiy

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]

- Ashley Construct Team Founder
- Moderator
- - Joined 21 May, 2007
  - 658 topics • 29,101 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?
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- 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