How to override "best fit scaling" and limit the game canvas width & height within the html window

I'm not talking about changing the base resolution of the game. I'm talking about limiting how it scales.

One of my clients is complaining that a Construct 3 game is running VERY slowly on certain computers with large screen resolutions. When he resizes the window to be smaller the game runs perfectly. I agree with him that limiting the size of the game SHOULD be an easy fix but unfortunately Construct 3 doesn't seem to have an obvious option for this.

I have tried and to modify the canvas size manually using javascript but I'm having issues because:

a) Construct will override this on occasion (resize window etc)

b) Even if I change the canvas values the touch event positions don't scale and so all touches are "off target"

I have tied to embed the game inside another html window using <embed> or <iframe> and resize the parent accordingly. It works fine on my test server but unfortunately the clients LMS website blocks scripts on child embeds. imo I should not have to resort to embedding to perform such a simple task anyway.

How would I go about changing the way Construct scales the game and make it "think" the window is smaller than it really is?

Thanks for reading and any help you can offer. I'm new to this engine and have picked up a few jobs requiring that I edit existing projects. It has been smooth sailing up until this point.

not sure if this will help or not...

for a lot of the database work I do I resize the canvas to the window dimensions so that I get a 1 to 1 pixel size. That way one pixel wide lines don't scale / get blurry.

So, I tried similar logic to limit the canvas size. My sample project below turns off scaling, and just resizes the canvas based on the window size. I clamp the values to limit how big (and how small) the canvas can get, and re-position objects as necessary.

I create a red dot on each touch to show that the touch coordinates are correct. If the window gets too big, the canvas size is limited - which results in a black bar on the right and/or bottom. (not sure if the canvas can be centered). C3 still recognises touches outside the canvas area, so I filter those out...

I have no idea if this will affect performance the way you hope.

https://www.rieperts.com/games/forum/ScreenSizeLimit.c3p

When he resizes the window to be smaller the game runs perfectly.

Usually this means your game is limited by the GPU hardware fill rate (see performance tips).

A quick fix could be to enable low quality fullscreen mode. This renders the game at a fixed size given by the viewport size, and stretches the result to fill the screen, rather than rendering the entire game and all layers at full resolution. It affects the display quality, but should be fast even when upscaling to very large screen sizes.

not sure if this will help or not...

for a lot of the database work I do I resize the canvas to the window dimensions so that I get a 1 to 1 pixel size. That way one pixel wide lines don't scale / get blurry.

So, I tried similar logic to limit the canvas size. My sample project below turns off scaling, and just resizes the canvas based on the window size. I clamp the values to limit how big (and how small) the canvas can get, and re-position objects as necessary.

I create a red dot on each touch to show that the touch coordinates are correct. If the window gets too big, the canvas size is limited - which results in a black bar on the right and/or bottom. (not sure if the canvas can be centered). C3 still recognises touches outside the canvas area, so I filter those out...

I have no idea if this will affect performance the way you hope.

https://www.rieperts.com/games/forum/ScreenSizeLimit.c3p

Thanks for your example and ideas but I don't really have the option of manually moving / scaling objects within Construct logic so the game is always centred. It's a huge pre-existing project I've inherited. If I did your solution I'd have to constantly manage the viewports positions within Construct right?

I'm talking about the canvas object on the index.html page. I've figured out how to resize it permanently by "hacking" the main.js file. Problem is there is a touch logic layer somewhere that is not translating the touch events appropriately. The logic is actually pretty weird and over complex if you ask me. I find it very surprising that the Construct devs didn't make the way the canvas is displayed more flexible...

Hello Stwersc, Did you manage to find how to fix this issue?

I'm having the same issue with my html5 game

Hello Stwersc, Did you manage to find how to fix this issue?

I'm having the same issue with my html5 game

******** Update*******

In our case the problem was a setting in Chrome, the option "Use hardware acceleration when available" was disable what cost system not to use the GPU what cost the poor performance of the game.