0 Favourites

How do I prevent Construct 2 ignoring canvas size?

  • I'm having problems with a Construct 2 project ignoring the canvas size and displaying the project as the full size of the screen. eg:

    <!-- The canvas must be inside a div called c2canvasdiv -->
    <div id="c2canvasdiv" style="width: 618px; height: 463px;">
         <!-- The canvas the project will render to... -->
         <canvas id="c2canvas" width="618" height="463">
              Your browser does not appear to support HTML5...
         </canvas>
    </div>

    I would expect the project to be exactly 618 pixels wide by 463 pixels high, but it takes up the full screen!

    I have tried setting a size in the document ready and resize function too:

    // Start the Construct 2 project running on window load.
    jQuery(document).ready(function ()
    {
         // Create new runtime using the c2canvas
         cr_createRuntime("c2canvas");
         cr_sizeCanvas(618, 463);
    });
    
    jQuery(window).resize(function() {
         cr_sizeCanvas(618, 463);
    });

    I cannot understand how the game window can be more than 618 x 463 when it's hardcoded as the canvas size! Help!

    You can have a look at the game here: http://www.numberworks.com/arcade/steve-storm-and-the-tables-of-doom

  • Extra information.

    This approach was working last year when we complied our game using on older version of Construct 2 - now we had to recompile to fix another issue with the latest Construct 2 and now it no longer works.

  • Construct 2 sets the canvas size automatically. If you want it to be a fixed size, turn off 'fullscreen in browser' in project properties and set the window size property to 618x463.

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • How should I do if I want the layout to be responsive but not to be fullscreen

    I mean, I don't want to use the IFrame solution, but to put the canvas inside a div, and set the div size for all of the available width and height.

    Anyone has done this?

  • Just wondering if anyone has a solution for the above request, i.e. how to make the canvas fill a responsive div without using an iframe?

    We've got a single page app implemented using AngularJS and don't wan the canvas taking up the entire screen but it still needs to be able to access AngualrJS services from a custom action. We've got all the AngularJS integration working fine, I just need to tidy up the layout.

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