HTML5 Export, missing <canvas>

Get help using Construct 3!

Post » Wed Jul 12, 2017 11:45 pm

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:

Code: Select all
   <!-- 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>


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!
B
16
S
4
Posts: 50
Reputation: 1,030

Post » Mon Jul 17, 2017 12:12 pm

Construct 3 adds the canvas element from JavaScript. It should work identically to as if the HTML tag were used instead.
Scirra Founder
B
387
S
230
G
88
Posts: 24,251
Reputation: 192,454

Post » Mon Jul 17, 2017 2:39 pm

Ashley wrote: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
B
16
S
4
Posts: 50
Reputation: 1,030

Post » Tue Jul 18, 2017 12:04 pm

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.
Scirra Founder
B
387
S
230
G
88
Posts: 24,251
Reputation: 192,454

Post » Tue Jul 18, 2017 12:08 pm

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.
B
16
S
4
Posts: 50
Reputation: 1,030

Post » Wed Aug 02, 2017 12:33 am

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:

Code: Select all
<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>


so that it fully wraps the games 'canvas' I would be eternally grateful
B
16
S
4
Posts: 50
Reputation: 1,030


Return to How do I...?

Who is online

Users browsing this forum: No registered users and 0 guests