Canvases and Panels are the two primary “container” widgets. You’ll need one of these if you want to include more than one Widget in a single UI template.

Canvases are simple blank slates, onto which you can freely place and position other widgets. Panels meanwhile automatically align widgets for you horizontally or vertically. In general, Canvases offer more freedom, but Panels are easier to build with.

It’s worth noting that you don’t need to include a Canvas or Panel in your UI – If you just want to create a simple, single-widget UI, you can delete the Canvas you start with when you create a new UI and just add the Widget you want to add. You can also delete the starting canvas and add a Panel if you prefer to start with that.

Canvas

We’ll start with Canvas since it’s the first Widget you’ll see on creating a new UI element.

Canvases don’t have any settings of their own. The settings you see initially will be for the attached Border, which will allow you to see your canvas, but otherwise the canvas would not inherently be visible.

Of course, when you first create a UI, your canvas will look invisible. That’s because a Canvas doesn’t have any specific size – it will size itself based on the widgets within. Right now there’s nothing in it, so there’s nothing much to see. If we change our Border color to Blue we’ll see a tiny dot at the center of the screen but that’s it:

But if we hit “Add to Canvas” and add a button, you’ll now see that Blue border surrounding the button:

Now let’s add an Image. In this case I’ve used the little TTP appearance icon. You’ll see it overlaps with the button at first:

If we were to move the Image up in the hierarchy, the button would appear in front of it (which in this case means we can’t see it anymore): 

If we don’t want them to overlap, we can put in new coordinates in the Position boxes. Below, we’ve changed the image’s Y position to 40. This drops it below the button. As you can see, the Canvas’ blue border expands to match.

If we set X to 100, the box would likewise extend horizontally to compensate:

If you want a Canvas of a fixed size to position things within, you can accomplish that by adding a Layout Box to the Canvas, or a Border Image of a fixed size (see Borders and Layout Boxes).

Panels

Panels are like Canvases in a lot of ways, but they position things for you. Here I’ve deleted the starting Canvas and added a panel instead. As with the Canvas, there’s nothing to see yet:

Let’s go ahead and add a border so we can see what we’re doing, then add a button.

So far, it’s just like the Canvas. But now if we add an image…

We’ll see it appears below the Button instead of on top of it.

To change the specifics of how they’re laid out, we can click back on Panel in the hierarchy and look at its controls in the bottom window:

If we change the Type to “Horizontal” our image will appear next to the Button instead of below it:

If we increase the “Children Distance”, they’ll be farther apart:

If we go back to Vertical, you’ll see Children Distance works there too.

The reason our image is stretched out in vertical is because it’s expanding in size to match the button. To fix this, we can change “Horizontal Alignment” from “Fill” to something else, like “Center”

And if we want to switch which order the Button and Image appear in, we can change their order in the hierarchy.

This will also work with horizontal panels, with the topmost child in the hierarchy appearing leftmost in the panel.

Tip: Panels Within Panels

It’s often useful to put Panels within Panels. In this Counter for example, the buttons are in a Vertical Panel, which is within a higher-level Horizontal Panel:

At this point you may be wondering how to get a Canvas or Panel of a specific, fixed size rather than one that shapes itself to its contents. The answer is that you’ll want to use a Border or Layout Box.