How to make the canvas to fit your viewport screen

Questions & Answers
1

I want to resize the canvas so that it fits the viewport.

–

I don’t quite understand the layout logic of how the canvas is graphically represented in the Scene window.

First, its bottom left corner starts at 0,0 in world coordinates and the whole canvas object is super large. The only rationale I can think of this is that:

A) positions relative to the size of the canvas can range from 0-1 with (0,0) at the bottom left–but this doesn’t explain why it’s at (hugeNumber1,hugeNumber2) on the top right.

B) The real size of the canvas doesn’t matter since everything inside of it will be scaled relative to its position.

–

If I try to place a text element on the far left edge of the canvas, it does not appear on the left edge of the screen when playing the game. (Note: my canvas’s render mode is set to Screen Space - Overlay).

I tried changing the bounds of the canvas manually through the scene window to stretch it horizontally, but the canvas bounds don’t move.

I tried looking through the docs, but I have only found a bunch of methods to get the camera’s viewport to match the canvas’s, and not vice-versa.

The only solution I had is to specify the screen position of the text in C#, but this is not an ideal solution because then it is harder to prototype different layouts (it’s much faster to do this graphically).

So how do you get the canvas to actually match your viewport?

EDIT: here are some screenshots

107904-unitycanvas1.png
107904-unitycanvas1.png1366×768 141 KB

107905-unitycanvas2.png
107905-unitycanvas2.png1366×768 68.6 KB

EDIT 2:
Interestingly when I pause the game I see that the canvas has seemingly stretched to accommodate the full size of the viewport but the text does not stay on the left edge of the screen.

hmm

2

it should do it automatically, maybe a screenshot would help?

3

I figured it out so I’m answering my own question here.

  1. The canvas will always automatically resize to the viewport. It may not seem like this if GUI elements are not laid out properly

  2. I was forgetting to set the anchor point of text elements. By setting the anchor point to the left of the screen I got my text to stick to the left edge of the screen while playing the game