Canvas

When you’re in the Editor, you can interact with elements in your project visually on the canvas. This is an easier way to engage with elements as opposed to locating a snippet of code for an element

You can also interact with elements in the Editor Canvas through the Layers or Node Inspector, but in this article we’ll focus on the canvas and the five aspects of interacting with elements on the canvas:

  • Selection — clicking on elements to select them

  • Parent Element— selecting an element’s parent

  • Dragging — clicking and dragging to relocate an element

  • Copying — duplicating the selected element

  • Deleting — deleting the selected element

Selection

To select an element on your canvas, point your cursor at the element and just click it.

Selecting Element in the Canvas

Notice that as you hover over elements on the Canvas, a blue outline highlights the edge of each element. This indicates which element you are selecting on the canvas.

Selecting an element will show the element label at the top-left corner of the selected element.

On the right side of the label you can see 4 different icons (Up Arrow, Drag, Copy, Delete). You can click the appropriate icon to access those settings.

Parent Element

You can select the parent element in the following ways.

  1. Click the — Up Icon on the Label

  2. Use the Node Inspectors (or) Layers.

Selecting Parent Element

Click the Up Icon on the label — when an element is selected, click the Up icons on the right side of label to see the names of its parent and grandparent elements. You can select the parent element by clicking its Up icon in this menu. This is helpful if a child element is sitting inside a parent element that is difficult to select.

Using Node Inspector (or) Layers — you can also make these kinds of selections on the right side under Layers tab.

Selecting Element Using Layers

Dragging

If you want to drag an element, simply click on the drag icons on the right side of the label and drag it into position.

Dragging Element inside Canvas

Cloning / Copying

To clone or duplicate any element on the canvas click on the copy icon on the right side of the label.

Cloning Element in Canvas

Deleting

To delete any element on the canvas click on the delete icon on the right side of the label or use Delete key. If you want to delete the nested item, you can make use of Layers (or) Node Inspector to select the element and the use Delete key or the delete icon.

Deleting Element in Canvas