Issue with the canvas aspect ratio when creating the WebGL build

When I uploaded the WebGL build for the Block Breaker game to my server the index.html has the following:
… id=“unityContainer” style=“width: 960px; height: 600px” …

This is not the correct (4x3) aspect ratio for the game, and therefore the canvas was wider than the content. I manually changed the line to:
… id=“unityContainer” style=“width: 800px; height: 600px” …

The game is now correctly displayed, however when I choose full screen mode the canvas is stretched and I have the original issue where the canvas is larger than the game content area. Is there a specific solution to this issue or is this an inherent problem with WebGL and aspect ratios?

Using Unity 2019.2.3f1 under Windows 10

1 Like

Hi Ken,

Our game does not have a responsive design, thus you cannot make it fullscreen. Select a different template in File > Build Settings > Player Settings and set the correct resolution there, e.g. 800 x 600.

1 Like

Thank you!

I think it’s time to go through and learn the Unity UI before continuing the course. I totally missed the Resolution and Presentation settings, hence the original default of 960 x 600 for WebGL.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Privacy & Terms