How do I prevent Construct 2 ignoring canvas size?

Get help using Construct 2

Post » Mon Feb 10, 2014 9:35 pm

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:

[CODE]<!-- 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...

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:

[CODE]// Start the Construct 2 project running on window load.
jQuery(document).ready(function ()
     // Create new runtime using the 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:
Posts: 2
Reputation: 529

Post » Mon Feb 10, 2014 9:40 pm

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.
Posts: 437
Reputation: 6,098

Post » Tue Feb 11, 2014 12:26 pm

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.
Scirra Founder
Posts: 25,073
Reputation: 199,682

Post » Tue Jul 08, 2014 3:30 pm

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?
Posts: 11
Reputation: 422

Post » Mon Nov 16, 2015 2:32 am

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.
Posts: 3
Reputation: 181

Return to How do I....?

Who is online

Users browsing this forum: Google [Bot] and 5 guests