I have an unusual scaling of UI Elements after my build in unity for WebGL

Game in Unity Engine: enter image description here

Game in Itch.io:

enter image description here

Has anyone seen this kind of behaviour? any suggestions on what I should look into? Happy to provide more info on the matter.


  • \$\begingroup\$ How have you configured your UI Canvas object in the Inspector? \$\endgroup\$ – DMGregory Oct 19 '19 at 12:38

This is due to your Canvas scaling properties. By default the Canvas that you use doesn't scale with the resolution. So if you work in Unity with a small resolution (your game window size defines the resolution you're using, in your case it's a 4:3 ratio resolution but it seems very small), let's say 640x480 and try to play the game after building it on a 1280x1024 screen resolution, your canvas will still be 640x480 and at the middle of the screen.

To avoid that behaviour you can add a component CanvasScaler on your Canvas and define the behaviour you're expecting (I feel like you want a "Match width or height" mode). You can find more about the Canvas Scaler here.

| improve this answer | |
  • \$\begingroup\$ (and welcome here Arman!) \$\endgroup\$ – lvictorino Oct 22 '19 at 14:18
  • \$\begingroup\$ Ah Thanks so much! It was previously set to constant pixel size. I'll get back to you on how it goes. \$\endgroup\$ – Arman Haque Nov 2 '19 at 1:15
  • \$\begingroup\$ And thanks for the welcome! @Ivictorino \$\endgroup\$ – Arman Haque Nov 2 '19 at 1:15
  • \$\begingroup\$ Awesome! That fixed it. Marking as correct @lvictorino \$\endgroup\$ – Arman Haque Nov 2 '19 at 1:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.