UE5 Canvas Panel UI

What You Will Learn

• What the Canvas Panel is in Unreal Engine UMG
• When to use Canvas Panel instead of layout boxes
• How Canvas Slot properties work
• How anchors control positioning and scaling
• How Position X and Position Y affect widget placement
• How Size X and Size Y define widget dimensions
• How Alignment changes the widget pivot point
• How ZOrder controls UI layering
• How Screen Size and Fill Screen preview settings work
• How to nest Canvas Panels for modular UI layouts

What Is the Canvas Panel?

The Canvas Panel is a UMG layout container that allows absolute positioning. That means each child widget placed inside the Canvas Panel can have its own position, size, anchor, alignment, and layer order.

Unlike Vertical Box, Horizontal Box, Grid Panel, or Wrap Box, the Canvas Panel does not automatically arrange its children. It gives you full control, but that control comes with responsibility.

A simple Canvas hierarchy may look like this:

Canvas Panel
  Image_Background
  Text_Title
  Button_Start
  Button_Quit

Each child has a Canvas Panel Slot. That slot is what defines where the widget appears and how it behaves when the screen size changes.

Why Canvas Panel Matters

The Canvas Panel is often the root widget in Unreal Engine UI because it works well as a screen-level container. It lets you place major UI sections exactly where you want them.

You will use it constantly for:

• HUD layouts
• crosshairs
• health and stamina displays
• main menus
• pause menus
• popup windows
• dialogue boxes
• minimaps
• inventory panels
• loading screens
• title cards

The mistake many beginners make is using Canvas Panel for everything. That creates painful UI. Canvas should usually handle major screen placement, while other layout widgets handle internal structure.

A clean pattern looks like this:

Canvas Panel
  Border
    Vertical Box
      Text_Title
      Button_Play
      Button_Settings
      Button_Quit

In this structure, the Canvas Panel positions the menu panel on the screen. The Border styles it. The Vertical Box organizes the buttons.

Canvas Panel vs Other Layout Widgets

The Canvas Panel gives absolute control. Other panels give automatic layout behavior.

Use Canvas Panel when you need to place something in a specific screen location.

Use layout panels like Vertical Box, Horizontal Box, Grid Panel, or Wrap Box when you want widgets arranged automatically.

• Canvas Panel: manual positioning
• Vertical Box: top-to-bottom stacking
• Horizontal Box: left-to-right rows
• Grid Panel: structured rows and columns
• Overlay: stacked layers
• Wrap Box: responsive wrapping layout
• Scroll Box: scrollable content

The Canvas Panel is powerful, but it should not replace every layout panel. Use it as the outer layout frame, then nest better structure inside it.

Step 1: Create a Widget Blueprint

Start by creating a new Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it something simple:

WBP_CanvasPanelExample

Open the widget. In most cases, Unreal will already create a Canvas Panel as the root. If not, drag a Canvas Panel from the Palette into the hierarchy and use it as the main root container.

Step 2: Understand the Designer Preview

At the top of the UMG Designer, you will see preview controls. These settings do not directly change your game logic, but they help you test how the UI behaves across different screens.

The first important preview option is Screen Size. This lets you preview your widget on different device sizes and aspect ratios.

For example, you can preview how the same widget looks on:

• desktop monitor resolutions
• mobile screen presets
• tablet-like layouts
• custom screen sizes

This matters because a UI that looks good on one screen can break on another if anchors and alignment are wrong.

Step 3: Fill Screen, Custom, and Desired Preview Modes

Another important designer option controls how the widget preview behaves.

Common modes include:

• Fill Screen: the widget fills the full preview area.
• Custom: you manually define preview width and height.
• Desired: the widget preview follows the desired size of its content.

For HUDs and full-screen menus, Fill Screen is usually the most realistic preview mode.

For small reusable widgets, Custom or Desired can be more useful.

Example:

Full HUD widget = Fill Screen
Inventory item widget = Custom
Small button widget = Desired

Step 4: Add a Child Widget to the Canvas

Drag a Text Block, Image, or Button into the Canvas Panel.

Once placed inside the Canvas Panel, the child receives Canvas Slot settings.

These slot settings are the core of Canvas Panel layout:

• Anchors
• Position
• Size
• Alignment
• Size To Content
• ZOrder

Understanding these settings is the main point of learning Canvas Panel.

Understanding Anchors

Anchors define the reference point or reference area used by a widget inside the Canvas Panel.

If a widget is anchored to the top-left corner, its position is calculated from the top-left of the parent canvas.

If it is anchored to the center, its position is calculated from the center.

If it is anchored to the bottom-right, its position is calculated from the bottom-right.

This is why anchors matter so much for responsive UI.

Top-left anchor = useful for debug text or FPS counter
Center anchor = useful for crosshair or menu panel
Bottom-right anchor = useful for ammo or input hints
Bottom-left anchor = useful for health and status UI

Anchor Presets

Unreal gives you anchor presets in a grid. These presets let you quickly anchor widgets to common screen positions.

Useful anchor presets include:

• Top Left
• Top Center
• Top Right
• Center Left
• Center
• Center Right
• Bottom Left
• Bottom Center
• Bottom Right
• Full Stretch

For a crosshair, use center anchor. For a health bar, bottom-left or top-left often makes sense. For a full-screen background, use full stretch.

Position X and Position Y

Position X and Position Y define the widget offset from its anchor.

Example:

Anchor = Top Left
Position X = 100
Position Y = 50

This places the widget 100 units to the right and 50 units down from the top-left anchor.

Another example:

Anchor = Center
Position X = 0
Position Y = 0

This places the widget around the center area, depending on the widget alignment.

This is where beginners usually get confused. Position alone does not guarantee that a widget is visually centered. Alignment also matters.

Understanding Alignment

Alignment controls the pivot point of the widget inside its slot.

A widget with Alignment X 0 and Alignment Y 0 uses its top-left corner as the pivot.

A widget with Alignment X 0.5 and Alignment Y 0.5 uses its center as the pivot.

A widget with Alignment X 1 and Alignment Y 1 uses its bottom-right corner as the pivot.

Alignment 0, 0 = top-left pivot
Alignment 0.5, 0.5 = center pivot
Alignment 1, 1 = bottom-right pivot

For centered UI elements, use:

Anchor = Center
Position X = 0
Position Y = 0
Alignment X = 0.5
Alignment Y = 0.5

That is the clean setup for menus, crosshairs, centered popups, and modal windows.

Size X and Size Y

Size X and Size Y define the width and height of the widget slot.

Example:

Size X = 400
Size Y = 200

This creates a widget area that is 400 units wide and 200 units tall.

This is useful for panels, buttons, images, and fixed-size UI areas.

For Text Blocks and Buttons, you may also use Size To Content when the widget should automatically fit the content.

Size To Content

Size To Content makes the Canvas Slot use the desired size of the child widget instead of a manually defined size.

This can be useful for text labels, small buttons, and tooltips.

Use Size To Content carefully. It is useful for compact widgets, but for large panels and screen layouts, fixed size or layout containers are often better.

ZOrder and Layering

ZOrder controls which widgets appear in front of others inside the Canvas Panel.

Higher ZOrder values render above lower ZOrder values.

Background Image ZOrder = 0
Panel ZOrder = 1
Button ZOrder = 2
Tooltip ZOrder = 10

This is important when you have overlapping UI elements.

For example, if a background image appears above your buttons, the buttons may be hidden or blocked visually. Increase the button ZOrder or lower the background ZOrder.

Stretch Anchors

Anchors can also stretch a widget between two sides of the parent canvas.

Full stretch anchors are useful for backgrounds, overlays, blur panels, and full-screen containers.

Example:

Anchor = Full Stretch
Offset Left = 0
Offset Top = 0
Offset Right = 0
Offset Bottom = 0

This makes the widget fill the full parent area.

For full-screen background images, overlays, fade effects, and dark menu backdrops, this is often the correct setup.

Canvas Panel as Root Container

Canvas Panel is commonly used as the root container because it lets you place major UI regions around the screen.

Example HUD root:

Canvas Panel
  HealthPanel anchored Bottom Left
  AmmoPanel anchored Bottom Right
  Crosshair anchored Center
  ObjectivePanel anchored Top Right

This makes sense because each section belongs to a different screen area.

Inside each section, you should usually use layout panels instead of manually placing everything.

Nesting Canvas Panels

You can place a Canvas Panel inside another Canvas Panel.

This is useful when you want a local area that also needs absolute positioning.

Example:

Root Canvas Panel
  InventoryWindow Canvas Panel
    ItemIcon
    ItemTooltip
    CloseButton

The root canvas positions the inventory window on the screen. The nested canvas controls local positions inside the inventory window.

This can be useful, but do not abuse it. Too many nested Canvas Panels can create a messy hierarchy.

Combining Canvas Panel with Other Layout Panels

The best UI structures usually combine Canvas Panel with layout widgets.

Example main menu:

Canvas Panel
  Border
    Vertical Box
      Text_Title
      Button_Play
      Button_Options
      Button_Quit

Example HUD row:

Canvas Panel
  Horizontal Box
    HealthIcon
    HealthBar
    HealthText

Example settings screen:

Canvas Panel
  Border
    Scroll Box
      Vertical Box
        SettingsRow
        SettingsRow
        SettingsRow

The Canvas Panel handles screen placement. The internal layout panels handle structure.

Practical Use Case: Centered Main Menu

A centered main menu is a perfect Canvas Panel example.

Use:

Anchor = Center
Position X = 0
Position Y = 0
Alignment X = 0.5
Alignment Y = 0.5

Then place a Border or Vertical Box inside that centered area.

Canvas Panel
  Border centered
    Vertical Box
      Text Game Title
      Button Start
      Button Settings
      Button Quit

Practical Use Case: Crosshair

For a simple crosshair, anchor it to the center.

Anchor = Center
Position X = 0
Position Y = 0
Alignment X = 0.5
Alignment Y = 0.5

Then use an Image or Text Block as the crosshair.

This keeps the crosshair centered even when the screen resolution changes.

Practical Use Case: Health UI

Health UI is often placed at the bottom-left or top-left of the screen.

Anchor = Bottom Left
Position X = 40
Position Y = -40

Use a Horizontal Box or Vertical Box inside that area to organize the icon, bar, and text.

Practical Use Case: Full-Screen Background

For a full-screen menu background or dark overlay, use stretch anchors.

Anchor = Full Stretch
Offset Left = 0
Offset Top = 0
Offset Right = 0
Offset Bottom = 0

This makes the background fill the entire screen.

Common Mistake: Center Anchor Without Center Alignment

This is one of the most common UMG mistakes.

A beginner sets the anchor to center and position to zero, then wonders why the widget is not truly centered.

The missing part is alignment.

Correct setup:

Anchor = Center
Position X = 0
Position Y = 0
Alignment X = 0.5
Alignment Y = 0.5

Common Mistake: Using Canvas for Lists

Canvas Panel is bad for long lists.

Do not manually position every list item with Y offsets. That is fragile and wastes time.

Use a Vertical Box or Scroll Box instead.

Scroll Box
  Vertical Box
    Item Row
    Item Row
    Item Row

Common Mistake: Ignoring Different Screen Sizes

Your UI may look correct in the Designer but break on a different resolution.

Use Screen Size preview options and test multiple aspect ratios.

Anchors are the main tool for handling different screen sizes in Canvas-based layouts.

Common Mistake: Wrong ZOrder

If a widget is hidden behind another widget, check ZOrder.

Higher values render on top.

Keep backgrounds low and important interactive elements higher.

Common Mistake: Building the Entire UI with Manual Positions

Canvas Panel is not an excuse to manually place everything.

Use Canvas Panel for the big areas. Use layout containers inside those areas.

Better:

Canvas Panel
  Border
    Vertical Box
      Button
      Button
      Button

Worse:

Canvas Panel
  Button at manual Y 100
  Button at manual Y 180
  Button at manual Y 260

The second version becomes annoying the moment you add, remove, or resize a button.

Good Canvas Panel Hierarchies

Full HUD:

Canvas Panel
  HealthWidget anchored Bottom Left
  AmmoWidget anchored Bottom Right
  Crosshair anchored Center
  Minimap anchored Top Right

Main menu:

Canvas Panel
  BackgroundImage full stretch
  Border centered
    Vertical Box
      Title
      Start Button
      Settings Button
      Quit Button

Popup:

Canvas Panel
  DarkOverlay full stretch
  PopupPanel centered
    Vertical Box
      Message
      Horizontal Box
        Confirm Button
        Cancel Button

Design Tips for Canvas Panel UI

• Use Canvas Panel for screen-level placement.
• Use center anchor plus 0.5 alignment for centered widgets.
• Use stretch anchors for full-screen backgrounds and overlays.
• Use ZOrder intentionally for layering.
• Do not manually place every child if a layout panel can do it better.
• Preview multiple screen sizes while designing.
• Combine Canvas Panel with Border, Overlay, Vertical Box, and Horizontal Box.
• Rename important widgets so your hierarchy stays readable.

How to Improve Canvas Layouts Later

Once you understand the basics, you can improve your Canvas-based layouts with more advanced UMG techniques.

Useful upgrades:

• Add responsive anchors for different screen areas
• Use Size Boxes to control fixed widget dimensions
• Use Scale Boxes for resolution-safe scaling
• Use Overlay for layered card layouts
• Use Borders for styled containers
• Add animations for menu transitions
• Use reusable child widgets for clean structure
• Test layouts on multiple aspect ratios

Conclusion

In this tutorial, you learned how the Canvas Panel works in Unreal Engine UMG. You learned that Canvas Panel gives absolute positioning, but every child widget depends on Canvas Slot settings such as anchors, position, size, alignment, and ZOrder.

The Canvas Panel is essential for screen-level UI placement, but it should not be abused for every layout problem. Use it to place major UI sections, then use layout widgets like Horizontal Box, Vertical Box, Overlay, Grid Panel, and Scroll Box inside those sections.

Mastering Canvas Panel is one of the first serious steps toward building clean, scalable Unreal Engine UI.

Watch the full video tutorial: Learn Unreal Engine Canvas Panel in 3 Minutes

More Unreal Engine UI tutorials: rambod.net

Subscribe for more Unreal Engine tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

What is Canvas Panel in Unreal Engine UMG?

Canvas Panel is a UMG layout container that allows absolute positioning of child widgets using anchors, position, size, alignment, and ZOrder.

When should I use Canvas Panel?

Use Canvas Panel for screen-level placement, HUD sections, popups, menus, crosshairs, overlays, and UI elements that need specific screen positions.

Should I use Canvas Panel for every UI element?

No. Use Canvas Panel for major placement, then use layout panels like Vertical Box, Horizontal Box, Grid Panel, Overlay, and Scroll Box for internal structure.

Why is my widget not centered even though the anchor is centered?

You probably did not set Alignment to 0.5 and 0.5. For true center placement, use center anchor, position zero, and alignment 0.5 on both axes.

What does ZOrder do in Canvas Panel?

ZOrder controls layer priority. Higher ZOrder values render above lower values.

What is the difference between Fill Screen and Custom preview?

Fill Screen previews the widget as a full-screen layout. Custom lets you manually set preview width and height, which is useful for smaller reusable widgets.

Can I nest Canvas Panels?

Yes. You can place a Canvas Panel inside another Canvas Panel, but use this carefully. Too many nested canvases can make the UI harder to maintain.