Canvas
Canvas is the container of all UI elements. It appears as a game object and is initially attached with Canvas component, and all UI elements must take it as the parent object. If there is no Canvas in the current game scene, when you create a UI element, such as an Image element, a Canvas parent object is automatically created for it, with the UI element as its child. A Canvas is displayed as a rectangle in the game scene, which makes it easy to locate UI elements because you don’t need to view it in the game view in real time; Canvas uses the EventSystem object to assist Messaging System;
Draw order of elements
UI elements are drawn in the Canvas in the order they are placed in Hierarchy. For example, the first child of the Canvas (UI element) is drawn, followed by the second… ; If two UI elements overlap, the one behind overrides the one before; If you need to display an element on top of other elements, simply drag it to change its Hierarchy order. At the same time, the element display order can also be determined by using the Transform component’s methods in the script: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.
Render Mode
The Canvas’s Render Mode option can be used to determine how the Canvas is rendered in Scren Space or World Space.
Screen Space – Overlay
This render mode makes all UI elements specially rendered at the top of the game scene, so that all UI elements appear at the top of the screen; If Screen size changes or Resolution changes, the Canvas will automatically change size to accommodate Screen changes. This display can only be horizontal;
Screen Space – Camera
This rendering mode is similar to Screen Space-overlay, but in this mode, the Canvas in the scene is placed in front of a given camera and the distance can be specified. The UI elements are rendered by this camera, which means that the camera’s parameters affect how the UI looks; If the camera is set to Perspective, all elements are rendered by the camera as a given Perspective, and the amount of Perspective Distortion can be captured by the camera’s Field of Distortion View control; If the screen size or resolution changes, or the Camera frustum changes, the Canvas will automatically change its size to accommodate the screen change.
World Space
In this rendering mode, the Canvas is represented as a normal object in a scene, just like any other object in the scene; The Canvas size can also be set manually in its Rect Transform component, and all UI elements are rendered in front or behind other game objects, depending on their 3D position; This pattern is useful for those who want to make UIs part of the world space;
