# Canvas
The canvas is your primary workspace in Lottie Creator. It is where you design, edit, and preview your animation visually. The viewport controls what portion of the canvas you are looking at and how zoomed in you are.

## What is the canvas

The canvas is the rectangular area that displays your animation scene. You use it to:

<List type="bullet">
  <ListItem>View and edit layers visually</ListItem>
  <ListItem>Draw shapes and paths</ListItem>
  <ListItem>Position and transform elements</ListItem>
  <ListItem>Preview animation playback</ListItem>
  <ListItem>Interact directly with layer content</ListItem>
</List>

The canvas works alongside the timeline:

<List type="bullet">
  <ListItem>The canvas controls spatial layout</ListItem>
  <ListItem>The timeline controls time and keyframes</ListItem>
</List>

Both views are always connected.

## Scene size and coordinates

The canvas displays your scene at a defined size.

<List type="bullet">
  <ListItem>Default scene size is 512 by 512 pixels</ListItem>
  <ListItem>Scene size is set in scene settings</ListItem>
  <ListItem>Zoom does not change the scene size</ListItem>
</List>

Coordinate system:

<List type="bullet">
  <ListItem>Origin 0,0 is at the top left</ListItem>
  <ListItem>X increases to the right</ListItem>
  <ListItem>Y increases downward</ListItem>
</List>

This matches standard screen and web coordinates.

## Zooming the canvas

Zoom changes how large your scene appears in the viewport. It does not affect the animation itself.

Common zoom levels:

<List type="bullet">
  <ListItem>Below 100 percent shows more of the scene</ListItem>
  <ListItem>100 percent shows actual pixel size</ListItem>
  <ListItem>Above 100 percent shows more detail</ListItem>
</List>

Ways to zoom:

<List type="bullet">
  <ListItem>Keyboard shortcuts</ListItem>
  <ListItem>Zoom menu in the toolbar</ListItem>
  <ListItem>Mouse wheel or trackpad gestures (ctrl/cmd + scroll)</ListItem>
</List>

Essential shortcuts:

<List type="bullet">
  <ListItem>Cmd or Ctrl + Plus to zoom in</ListItem>
  <ListItem>Cmd or Ctrl + Minus to zoom out</ListItem>
  <ListItem>Cmd or Ctrl + 0 to zoom to fit (frame the whole scene in the viewport)</ListItem>
</List>

For preset levels such as **100 percent**, use the **zoom dropdown** in the header toolbar.

## Panning the canvas

Panning moves the viewport without changing zoom.

<List type="bullet">
  <ListItem>Drag using mouse scroll wheel click</ListItem>
  <ListItem>Select the Hand Tool with H or from the toolbar, click and drag</ListItem>
  <ListItem>Pan using a trackpad</ListItem>
</List>

## Canvas display options

You can adjust how the canvas looks without affecting export.

Options include:

<List type="bullet">
  <ListItem>Background color</ListItem>
  <ListItem>Transparency checkerboard for alpha preview</ListItem>
  <ListItem>Scene bounds outline</ListItem>
</List>

The scene bounds show the edges of your animation. Content outside these bounds may be clipped on export.

## Canvas context menu

Right-click an empty area of the canvas (not on a layer or path handle) to open the **canvas context menu**. It groups shortcuts for pasting, showing or hiding panels and guides, and zooming the view.

### Paste

<List type="bullet">
  <ListItem>**Paste** — `Cmd/Ctrl + V` (dimmed when the clipboard has nothing you can paste here)</ListItem>
  <ListItem>**Paste as new scene** — `Option/Alt + Cmd/Ctrl + V`</ListItem>
</List>

### Panels, UI chrome, and guides

<List type="bullet">
  <ListItem>**Expand/Collapse timeline** — `Cmd/Ctrl + .`</ListItem>
  <ListItem>**Show/Hide UI** — `` ` `` (backtick / grave accent key, often the same physical key as tilde)</ListItem>
  <ListItem>**Show/Hide rulers** — `Shift + Option/Alt + R`</ListItem>
  <ListItem>**Show/Hide guides** — `Shift + Option/Alt + ;`</ListItem>
</List>

### Zoom

<List type="bullet">
  <ListItem>**Zoom in** — `Cmd/Ctrl + +`</ListItem>
  <ListItem>**Zoom out** — `Cmd/Ctrl + -`</ListItem>
  <ListItem>**Zoom to fit** — `Cmd/Ctrl + 0`</ListItem>
</List>

These match the shortcuts in the menu; you can use the same actions from the keyboard without opening the context menu.