Canvas and render modes in Unity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Canvas render mode check?

Consider this Unity C# code snippet that checks the render mode of a Canvas component. What will be printed to the console?

Unity

using UnityEngine;

public class CanvasCheck : MonoBehaviour {
    public Canvas canvas;

    void Start() {
        if (canvas.renderMode == RenderMode.ScreenSpaceOverlay) {
            Debug.Log("Overlay mode active");
        } else if (canvas.renderMode == RenderMode.ScreenSpaceCamera) {
            Debug.Log("Camera mode active");
        } else {
            Debug.Log("World space mode active");
        }
    }
}

A Overlay mode active

B Camera mode active

C World space mode active

D No output (null reference error)

💡 Hint

The default render mode for a new Canvas in Unity is Screen Space - Overlay.

By default, a Canvas component's renderMode is set to ScreenSpaceOverlay, so the first condition is true and "Overlay mode active" is printed.

🧠 Conceptual

intermediate

Which Canvas render mode allows UI elements to appear in 3D space?

In Unity, which Canvas render mode lets UI elements behave like normal 3D objects in the scene, affected by lights and perspective?

A None of the above

B Screen Space - Camera

C Screen Space - Overlay

D World Space

💡 Hint

Think about which mode places UI in the actual 3D world.

World Space mode places the Canvas as a 3D object in the scene, so UI elements behave like other 3D objects.

🔧 Debug

advanced

Why does this UI not appear when using Screen Space - Camera?

This code sets the Canvas render mode to Screen Space - Camera but the UI is invisible. What is the most likely cause?

Unity

Canvas canvas = GetComponent<Canvas>();
canvas.renderMode = RenderMode.ScreenSpaceCamera;
// No camera assigned to canvas.worldCamera

// UI elements are children of this canvas

A Screen Space - Camera mode does not support UI elements as children.

B The canvas.worldCamera is not assigned, so UI is not rendered.

C The canvas.renderMode must be set to World Space for UI to show.

D The UI elements need a CanvasGroup component to be visible.

💡 Hint

Screen Space - Camera mode requires a camera reference.

When using Screen Space - Camera, the Canvas needs a camera assigned to its worldCamera property to render UI properly.

📝 Syntax

advanced

Which code snippet correctly sets Canvas to World Space mode and positions it?

Choose the correct C# code to set a Canvas to World Space render mode and place it at position (0, 1, 0).

A

canvas.renderMode = RenderMode.WorldSpace;
canvas.position = new Vector3(0, 1, 0);

B

canvas.mode = RenderMode.WorldSpace;
canvas.transform.position = new Vector3(0, 1, 0);

C

canvas.renderMode = RenderMode.WorldSpace;
canvas.transform.position = new Vector3(0, 1, 0);

D

canvas.renderMode = RenderMode.WorldSpace;
canvas.transform.localPosition = new Vector3(0, 1, 0);

💡 Hint

Remember the correct property names for Canvas and Transform.

Canvas has a renderMode property. Transform position is set via transform.position with a Vector3 constructor.

🚀 Application

expert

How many Canvas components can be set to Screen Space - Overlay in a scene without UI overlap issues?

In Unity, if you have multiple Canvas components set to Screen Space - Overlay, how many can you have active simultaneously without UI elements overlapping unexpectedly?

A Multiple Canvas components can be Screen Space - Overlay; their order is controlled by sorting order.

B You cannot have any Canvas set to Screen Space - Overlay if you use World Space canvases.

C Only one Canvas can be Screen Space - Overlay to avoid overlap issues.

D Screen Space - Overlay canvases automatically merge into one, so count is irrelevant.

💡 Hint

Think about how Unity handles multiple overlay canvases and their draw order.

Unity allows multiple Screen Space - Overlay canvases; their draw order depends on the Canvas sorting order property.

Practice

1. What does the Screen Space - Overlay render mode do in a Unity Canvas?

easy

A. Draws UI elements directly on the screen, always visible on top.

B. Renders UI elements as part of the 3D world, affected by camera perspective.

C. Draws UI elements only when the game is paused.

D. Renders UI elements on a separate camera layer invisible to the main camera.

Solution

1. Step 1: Understand Screen Space - Overlay mode

   This mode draws UI elements directly on the screen, ignoring the 3D world and camera.

2. Step 2: Compare with other modes

   Other modes like Screen Space - Camera or World Space render UI differently, but Overlay is always on top and visible.

3. Final Answer:

   Draws UI elements directly on the screen, always visible on top. -> Option A

4. Quick Check:

   Overlay mode = UI always on screen [OK]

Hint: Overlay mode means UI is always on top of everything [OK]

Common Mistakes:

• Confusing Overlay with World Space mode
• Thinking UI is affected by camera in Overlay mode
• Assuming Overlay hides UI when paused

2. Which of the following is the correct way to set a Canvas to use the World Space render mode in C# script?

easy

A. canvas.renderMode = RenderMode.WorldSpace;

B. canvas.setRenderMode("WorldSpace");

C. canvas.RenderMode = "WorldSpace";

D. canvas.mode = RenderMode.WorldSpace;

Solution

1. Step 1: Recall Canvas renderMode property usage

   In Unity C#, the Canvas component has a property called renderMode which is set using the RenderMode enum.

2. Step 2: Identify correct syntax

   The correct syntax is canvas.renderMode = RenderMode.WorldSpace;. Other options use incorrect property names or methods.

3. Final Answer:

   canvas.renderMode = RenderMode.WorldSpace; -> Option A

4. Quick Check:

   Use enum RenderMode.WorldSpace for world space canvas [OK]

Hint: Use enum RenderMode.WorldSpace to set world space mode [OK]

Common Mistakes:

• Using string instead of enum for renderMode
• Wrong property name capitalization
• Trying to call a method instead of setting property

3. Consider this code snippet in Unity:

Canvas canvas = GetComponent<Canvas>();
canvas.renderMode = RenderMode.ScreenSpaceCamera;
canvas.worldCamera = Camera.main;
Debug.Log(canvas.renderMode);

What will be printed in the console?

medium

A. WorldSpace

B. ScreenSpaceOverlay

C. ScreenSpaceCamera

D. null

Solution

1. Step 1: Analyze the renderMode assignment

   The code sets canvas.renderMode to RenderMode.ScreenSpaceCamera.

2. Step 2: Understand Debug.Log output

   Logging canvas.renderMode will print the enum name, which is "ScreenSpaceCamera".

3. Final Answer:

   ScreenSpaceCamera -> Option C

4. Quick Check:

   canvas.renderMode = ScreenSpaceCamera prints "ScreenSpaceCamera" [OK]

Hint: Debug.Log prints enum names as strings [OK]

Common Mistakes:

• Expecting the camera name instead of renderMode
• Confusing ScreenSpaceOverlay with ScreenSpaceCamera
• Assuming null is printed if worldCamera is set

4. You have a Canvas set to RenderMode.WorldSpace but UI elements are not visible in the scene. What is the most likely cause?

medium

A. The UI elements are not children of the Canvas GameObject.

B. The Canvas renderMode should be set to ScreenSpaceOverlay for visibility.

C. The Canvas component is missing the CanvasScaler script.

D. The Canvas scale is too small or positioned outside the camera view.

Solution

1. Step 1: Understand World Space Canvas behavior

   World Space Canvas acts like a 3D object, so scale and position affect visibility.

2. Step 2: Identify common visibility issues

   If scale is too small or Canvas is outside camera view, UI won't be seen even if correctly set.

3. Final Answer:

   The Canvas scale is too small or positioned outside the camera view. -> Option D

4. Quick Check:

   World Space Canvas needs proper scale and position [OK]

Hint: Check Canvas scale and position in world space [OK]

Common Mistakes:

• Thinking CanvasScaler is required for visibility
• Assuming renderMode must be Overlay to see UI
• Forgetting to parent UI elements to Canvas

5. You want a UI panel to appear fixed on the screen but also interact with a 3D object behind it using raycasts. Which Canvas render mode and setup should you use?

hard

A. Screen Space - Overlay with Graphic Raycaster blocking raycasts to 3D objects.

B. Screen Space - Camera with Canvas assigned to main camera and raycast target disabled on UI elements.

C. Screen Space - Camera with Canvas assigned to main camera and raycast blocking disabled.

D. World Space Canvas positioned in front of the camera with raycast target enabled on UI elements.

Solution

1. Step 1: Understand UI fixed on screen with 3D interaction

   Screen Space - Camera mode allows UI to be fixed on screen but still respects camera perspective and raycasts.

2. Step 2: Setup for raycast interaction

   Assign Canvas to main camera and disable raycast target on UI elements so raycasts pass through to 3D objects behind.

3. Final Answer:

   Screen Space - Camera with Canvas assigned to main camera and raycast target disabled on UI elements. -> Option B

4. Quick Check:

   Screen Space - Camera + raycast target = fixed UI + 3D interaction [OK]

Hint: Use Screen Space - Camera for fixed UI with 3D raycast [OK]

Common Mistakes:

• Using Overlay mode which blocks all raycasts behind UI
• Enabling raycast targets on UI elements
• Using World Space which is not fixed on screen