# Canvas & Positioning

> Place elements at exact coordinates with Canvas, CanvasElement, and CanvasShape

Most slides should use normal flow layout. `Canvas` is for the ones that should
not — diagrams, annotated screenshots, anything where an element belongs at a
specific point.

## Canvas

```tsx
import { Canvas, CanvasElement, CanvasShape } from "@getnarro/core";

<Slide id="architecture">
  <Canvas>{/* positioned children */}</Canvas>
</Slide>;
```

## CanvasElement

Positions any content. `x` and `y` are percentages of the slide by default, so a
deck keeps its layout at every resolution.

```tsx
<CanvasElement x={10} y={20} width={30} height={15}>
  <div className="rounded bg-blue-500 p-4">Top left area</div>
</CanvasElement>

<CanvasElement x="100px" y="50px" rotate={45} opacity={0.8} zIndex={2}>
  <Text>Rotated, semi-transparent</Text>
</CanvasElement>
```

Pass a string with a unit (`"100px"`) to position in pixels instead.

## CanvasShape

Ten built-in shapes, drawn as SVG so they stay crisp at any scale:

<!-- generated:list:ShapeType -->`circle`, `rectangle`, `triangle`, `star`, `hexagon`, `pentagon`, `arrow`, `diamond`, `ellipse`, `cloud`<!-- /generated:list:ShapeType -->

```tsx
<CanvasShape shape="circle" x={50} y={50} size={100} color="#3b82f6" />

<CanvasShape
  shape="hexagon"
  x={400}
  y={150}
  size={90}
  color="#8b5cf6"
  stroke="#ffffff"
  strokeWidth={2}
  opacity={0.8}
  rotate={15}
/>
```

## When not to use it

Absolute positioning does not reflow. A canvas slide that looks right at 16:9
can overlap at 4:3, and text inside one will not wrap into a new line as it
grows. For anything that is fundamentally a list, a comparison, or a body of
text, use `SlideContent` and a layout component — they adapt, and they will
still look right on a projector you have not seen.

Exact prop tables are in the [component reference](/docs/components).