Canvas and render modes in Unity - Step-by-Step Execution

Concept Flow - Canvas and render modes

Start: Create Canvas

↓

Choose Render Mode

↓

UI visible on screen accordingly

This flow shows how creating a Canvas leads to choosing one of three render modes, each affecting how UI elements are drawn on screen or in the world.

Execution Sample

Unity

Canvas canvas = new Canvas();
canvas.renderMode = RenderMode.ScreenSpaceOverlay;
// Add UI elements to canvas
// Canvas draws UI on top of everything

This code creates a Canvas and sets its render mode to Screen Space Overlay, so UI elements appear on top of the screen.

Execution Table

Step	Action	Render Mode	Effect on UI	Output
1	Create Canvas object	ScreenSpaceOverlay (default)	No UI rendered yet	Canvas created, no UI visible
2	Set renderMode to ScreenSpaceOverlay	ScreenSpaceOverlay	UI drawn on top of screen	UI visible overlaying all content
3	Add UI elements to Canvas	ScreenSpaceOverlay	UI elements appear on screen	Buttons, text visible on screen
4	Change renderMode to ScreenSpaceCamera	ScreenSpaceCamera	UI drawn by camera in 3D space	UI visible relative to camera view
5	Assign camera to Canvas	ScreenSpaceCamera	UI moves with camera	UI positioned in camera view
6	Change renderMode to WorldSpace	WorldSpace	UI behaves like 3D object in world	UI visible as part of 3D scene
7	Position Canvas in world	WorldSpace	UI placed at world coordinates	UI appears in 3D space, can be occluded
8	End	-	-	Execution stops, UI rendered according to mode

💡 Execution stops after setting render mode and adding UI elements; UI appears differently based on mode.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
canvas.renderMode	ScreenSpaceOverlay	ScreenSpaceOverlay	ScreenSpaceCamera	WorldSpace	WorldSpace
canvas.camera	null	null	null	MainCamera assigned	MainCamera assigned
UI elements	none	none	added	added	added
canvas.position	(0,0,0)	(0,0,0)	(0,0,0)	(0,0,0)	(10,5,0)

Key Moments - 3 Insights

Why does UI appear on top of everything in ScreenSpaceOverlay mode?

Because in ScreenSpaceOverlay mode, the Canvas draws UI directly on the screen overlay, ignoring cameras and 3D scene, as shown in execution_table step 2 and 3.

What happens if you don't assign a camera in ScreenSpaceCamera mode?

UI won't render properly because the Canvas needs a camera to know where to draw UI in 3D space, as seen in execution_table step 5.

How is WorldSpace mode different from the other modes?

WorldSpace mode treats the Canvas as a 3D object in the scene, so UI can be positioned and occluded like any other 3D object, shown in steps 6 and 7.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what render mode is set for the Canvas?

A WorldSpace

B ScreenSpaceCamera

C ScreenSpaceOverlay

D None

💡 Hint

Check the 'Render Mode' column at step 2 in the execution_table.

At which step does the Canvas start behaving like a 3D object in the world?

A Step 3

B Step 6

C Step 5

D Step 7

💡 Hint

Look for when renderMode changes to WorldSpace in the execution_table.

If you forget to assign a camera in ScreenSpaceCamera mode, what will happen?

A UI will not render properly

B UI will behave like a 3D object

C UI will appear on top of everything

D UI will be invisible only in WorldSpace mode

💡 Hint

Refer to key_moments about camera assignment and execution_table step 5.

Concept Snapshot

Canvas in Unity controls how UI is drawn.
Three render modes:
- ScreenSpaceOverlay: UI drawn on top of screen.
- ScreenSpaceCamera: UI drawn by a camera in 3D space.
- WorldSpace: UI behaves like 3D object in scene.
Choose mode to control UI appearance and interaction.

Full Transcript

In Unity, a Canvas is used to display UI elements. When you create a Canvas, you must choose a render mode. The three modes are ScreenSpaceOverlay, ScreenSpaceCamera, and WorldSpace. ScreenSpaceOverlay draws UI directly on top of the screen, ignoring cameras and 3D objects. ScreenSpaceCamera draws UI using a camera's view, so UI moves with the camera. WorldSpace treats the Canvas as a 3D object in the scene, so UI can be positioned and occluded like other 3D objects. Assigning a camera is necessary for ScreenSpaceCamera mode to work properly. Changing the render mode changes how and where UI elements appear. This trace showed step-by-step how setting render modes affects UI rendering and positioning.