0 Favourites

New Canvas Html

  • 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]
  • 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?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Of course not

    It'll look awesome with Construct logo below

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)