HTML5 Export, missing <canvas>

Post reply
0 favourites
  • 6 posts
From the Asset Store
Write The Missing Letter For Kids - Educational Game
$11.20 USD
20% off
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
R Games's avatar
R Games

  • 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!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • 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.

  • 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
Post reply
  • 6 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)