HTML5 Export, missing <canvas>

  • Hi I'm loving CS3 but just ran into an issue because of some differences in the HTML5 export..

    In CS2 HTML5 export would include this kind of code:

    	<!-- The canvas must be inside a div called c2canvasdiv -->
    	<div id="c2canvasdiv">
    	
    		<!-- The canvas the project will render to.  If you change its ID, don't forget to change the
    		ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
    		<canvas id="c2canvas" width="1010" height="570">
    			<!-- This text is displayed if the visitor's browser does not support HTML5.
    			You can change it, but it is a good idea to link to a description of a browser
    			and provide some links to download some popular HTML5-compatible browsers. -->
    			<h1>Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org">What is a browser?</a>
    			<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
    			<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
    			<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
    			<a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
    		</canvas>
    		
    	</div>[/code:1zt2ovmc]
    
    But in CS3 HTML5 exports there's no <canvas> tags at all, and for a clients advertising purposes they use the Canvas tag to overlay an advert, so can anyone explain the differences (sorry if it's a silly question) and maybe offer a soloutin..
    
    Thanks in advance!
  • Construct 3 adds the canvas element from JavaScript. It should work identically to as if the HTML tag were used instead.

  • Construct 3 adds the canvas element from JavaScript. It should work identically to as if the HTML tag were used instead.

    Thanks for responding,

    not sure I entirely follow you, I'm being told I need to:

    "surround your <canvas> with

    <div id="mygame" style="position:absolute;height:100%;width:100%;top:0;left:0"></div>"

    but without the canvas tag in the exported html, and just using the 'div' id's it shows the ad, but above the game rather than overlaying the top of it

  • The runtime isn't designed to have other arbitrary tags added to it, and it's not our responsibility to support other libraries. I think you will need to ask for different instructions for Construct 3 from whoever is telling you this or providing this library.

    I would recommend using iframes to separate content than trying to modify C3's own HTML file.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Ok thank you for the advice, I appreciate it's not your responsibility to support other libraries, I just wanted some guidance on moving on since things changed in the new version.

    Hopefully your recommendation will help us find a new alternative solution.

  • Ok so with some assistance from Toby R, we got this script together, and it feels like it's almost there with wrapping the canvas with the div tags I need, can someone who knows about how C3 exports it's HTML files and can adjust this code:

    <script>
    setTimeout(function(){
        var originalCanvas = document.querySelector("canvas");
        var newCanvas = '<div id="mygame" style="position:absolute;height:100%;width:100%;top:0;left:0">' + originalCanvas.innerHTML + "</div>";
        originalCanvas.innerHTML = newCanvas;
    }, 3000);
    </script>[/code:3kcw5at7]
    
    so that it fully wraps the games 'canvas' I would be eternally grateful
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)