Class Canvas

A scrollable and zoomable container that provides infinite canvas functionality.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
BaseVisualElement
Canvas
Implements
Inherited Members
VisualElement.Focus()
VisualElement.Overlaps(Rect)
VisualElement.ToString()
VisualElement.TryGetBinding(BindingId, out Binding)
VisualElement.TryGetDataSourceContext(BindingId, out DataSourceContext)
VisualElement.TryGetLastBindingToUIResult(in BindingId, out BindingResult)
VisualElement.TryGetLastBindingToSourceResult(in BindingId, out BindingResult)
VisualElement.GetFirstOfType<T>()
VisualElement.GetFirstAncestorOfType<T>()
VisualElement.canGrabFocus
VisualElement.focusController
VisualElement.cacheAsBitmap
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, CallbackOptions)
CallbackEventHandler.NotifyPropertyChanged(in BindingId)
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Canvas : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder
Remarks

The Canvas component provides a scrollable and zoomable container that can host any UI elements. It's particularly useful for creating infinite canvas experiences like design tools, diagrams, or large content areas that need pan and zoom capabilities.

Key features include:

  • Smooth pan and zoom interactions
  • Customizable control schemes (Editor or Modern)
  • Configurable zoom limits and speeds
  • Frame-to-fit functionality
  • Grid background with customizable appearance
  • Space bar pan mode

The Canvas supports two control schemes:

  1. Modern (default): Similar to modern design tools like Figma or Sketch
  2. Editor: Matches Unity Editor's viewport controls
Examples

Basic Canvas Setup: Create a basic canvas with some content

<Canvas class="my-canvas">
    <Button text="Zoom Content" />
    <Label text="Pan me around!" />
</Canvas>

Frame Content Programmatically: Automatically adjust zoom and position to frame content

// Frame all content to fit the view
canvas.FrameAll();

// Frame a specific element
var element = canvas.Q<VisualElement>("my-element");
canvas.FrameElement(element);

Custom Control Configuration: Configure canvas controls for optimal user experience

canvas.controlScheme = CanvasControlScheme.Modern;
canvas.zoomSpeed = 0.1f;
canvas.scrollSpeed = 1.5f;
canvas.useSpaceBar = true;
canvas.minZoom = 0.25f;
canvas.maxZoom = 4.0f;

Constructors

Canvas()

Instantiates a Canvas element.

Declaration
public Canvas()

Fields

backgroundUssClassName

USS class name of the background element of this type.

Declaration
public const string backgroundUssClassName = "appui-canvas__background"
Field Value
Type Description
string

cursorUssClassName

USS class name prefix for the cursor.

Declaration
public const string cursorUssClassName = "cursor--"
Field Value
Type Description
string

horizontalScrollerUssClassName

USS class name of the horizontal scroller element of this type.

Declaration
public const string horizontalScrollerUssClassName = "appui-canvas__horizontal-scroller"
Field Value
Type Description
string

ussClassName

USS class name of elements of this type.

Declaration
public const string ussClassName = "appui-canvas"
Field Value
Type Description
string

verticalScrollerUssClassName

USS class name of the vertical scroller element of this type.

Declaration
public const string verticalScrollerUssClassName = "appui-canvas__vertical-scroller"
Field Value
Type Description
string

viewportContainerUssClassName

USS class name of the viewport container element of this type.

Declaration
public const string viewportContainerUssClassName = "appui-canvas__viewport-container"
Field Value
Type Description
string

viewportUssClassName

USS class name of the viewport element of this type.

Declaration
public const string viewportUssClassName = "appui-canvas__viewport"
Field Value
Type Description
string

Properties

contentContainer

The content container of the Canvas.

Declaration
public override VisualElement contentContainer { get; }
Property Value
Type Description
VisualElement
Overrides

controlScheme

The current control scheme of the canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public CanvasControlScheme controlScheme { get; set; }
Property Value
Type Description
CanvasControlScheme

dampingEffectDuration

The damping effect duration in milliseconds.

Declaration
[CreateProperty]
[UxmlAttribute]
public int dampingEffectDuration { get; set; }
Property Value
Type Description
int

frameContainer

The container used for framing the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public Optional<Rect> frameContainer { get; set; }
Property Value
Type Description
Optional<Rect>
Remarks

The container rect value must be defined in the Canvas' local coordinates.

frameMargin

The margin applied when framing the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float frameMargin { get; set; }
Property Value
Type Description
float

grabMode

The current grab state of the canvas (to pan).

Declaration
[CreateProperty(ReadOnly = true)]
public GrabMode grabMode { get; }
Property Value
Type Description
GrabMode

maxZoom

The maximum zoom factor of the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float maxZoom { get; set; }
Property Value
Type Description
float

minZoom

The minimum zoom factor of the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float minZoom { get; set; }
Property Value
Type Description
float

panMultiplier

The pan multiplier when Shift key is hold.

Declaration
[CreateProperty]
[UxmlAttribute]
public float panMultiplier { get; set; }
Property Value
Type Description
float

primaryManipulator

The current manipulator of the canvas for the primary pointer without modifier.

Declaration
[CreateProperty]
[UxmlAttribute]
public CanvasManipulator primaryManipulator { get; set; }
Property Value
Type Description
CanvasManipulator

scrollOffset

The scroll coordinates of the Canvas.

Declaration
[CreateProperty]
public Vector2 scrollOffset { get; set; }
Property Value
Type Description
Vector2

scrollSpeed

The scroll speed of the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float scrollSpeed { get; set; }
Property Value
Type Description
float

useSpaceBar

Whether the Canvas should use the Space bar to pan.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool useSpaceBar { get; set; }
Property Value
Type Description
bool

zoom

The zoom factor of the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float zoom { get; set; }
Property Value
Type Description
float

zoomMultiplier

The zoom speed multiplier when Shift key is hold.

Declaration
[CreateProperty]
[UxmlAttribute]
public float zoomMultiplier { get; set; }
Property Value
Type Description
float

zoomSpeed

The zoom speed of the Canvas.

Declaration
[CreateProperty]
[UxmlAttribute]
public float zoomSpeed { get; set; }
Property Value
Type Description
float

Methods

FrameAll()

Frame the Canvas to see all elements.

Declaration
public void FrameAll()

FrameArea(Rect)

Frame the Canvas to the given area. The area is in the Viewport's local coordinates.

Declaration
public void FrameArea(Rect viewportArea)
Parameters
Type Name Description
Rect viewportArea

The area to frame.

FrameElement(VisualElement)

Frame the Canvas to the given element. The element is in the Viewport's local coordinates.

Declaration
public void FrameElement(VisualElement element)
Parameters
Type Name Description
VisualElement element

The element to frame.

FrameWorldRect(Rect)

Frame the Canvas to the given world area. The area is in world coordinates.

Declaration
public void FrameWorldRect(Rect worldRect)
Parameters
Type Name Description
Rect worldRect

The area to frame.

GetGrabModeUssClassName(GrabMode)

Declaration
public static string GetGrabModeUssClassName(GrabMode enumValue)
Parameters
Type Name Description
GrabMode enumValue
Returns
Type Description
string

Events

scrollOffsetChanged

Event that is triggered when the scroll position of the Canvas has changed.

Declaration
public event Action scrollOffsetChanged
Event Type
Type Description
Action

zoomChanged

Event that is triggered when the zoom factor of the Canvas has changed.

Declaration
public event Action zoomChanged
Event Type
Type Description
Action

Implements

Extension Methods