UI Canvas

Every UI element you create must be a child of a UI Canvas. To see a list of all UI elements you can create within Unity, select Create | UI from the Hierarchy window, as shown in the following screenshot:

Every one of the UI items highlighted in the preceding screenshot are renderable UI items and must be contained within a Canvas to render. If you try to add any of those UI elements to a scene that does not contain a Canvas, a canvas will automatically be added to the scene, and the item you attempted to create will be made a child of the newly added Canvas. To demonstrate this, try adding a new UI Text element to an empty scene. You can do so by selecting Create | UI | Text.

This will cause three new items to appear in the Hierarchy list: Canvas, Text, and Event System, where the Text is a child of the Canvas.

Now that you have a Canvas in your scene, any new UI elements you add to the scene will automatically be added to this Canvas.

You can also create an empty Canvas by selecting Create | UI | Canvas. When you create a new Canvas in a scene, if an Event System GameObject does not already exist within the scene, one will automatically be created for you (as you saw in the preceding screenshot). We'll discuss the Event System further in Chapter 4, The Event System and Programming for UI, but, for now, all you really need to know is the Event System allows you to interact with the UI items.

When you create a Canvas, it will appear as a large rectangle within your scene. It will be significantly larger than that rectangle representing the camera's view:

The Canvas is larger than the Camera, because the Canvas Component has a scaling mode on it. The scaling mode by default equates one pixel within the UI to one Unity unit, so it's a lot bigger. A nice consequence of this large size is that the large size makes it really easy to see your UI items as a somewhat separate entity and keeps it from cluttering up your camera view.

Every newly created Canvas automatically comes with four components: Rect Transform, Canvas, Canvas Scaler, and Graphic Raycaster, as shown in the following screenshot:

Let's explore each of these components.