# Canvas

> Shows the photo. In the crop tool it shows the crop frame, and everywhere else the edited result.

```tsx
"use client";

import { ImageEditorProvider } from "photocn/react";

import { ImageEditorCanvas } from "@/components/image-editor/canvas";

// Scroll with ⌘/Ctrl or pinch to zoom · press and hold to see the original ·
// drop another photo onto it.
export default function CanvasDemo() {
  return (
    <ImageEditorProvider src="/samples/mountain-lake.jpg">
      <ImageEditorCanvas className="h-[420px] rounded-xl border p-2" />
    </ImageEditorProvider>
  );
}
```

## Installation

```bash
npx shadcn@latest add @photocn/image-editor-canvas
```

## Usage

```tsx
import { ImageEditorCanvas } from "@/components/image-editor/canvas";


  <ImageEditorCanvas className="h-96" />

```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `className` | `string` | Classes for the outer element. |
| `alt` | `string` | Accessible name for the image. |
| `allowDrop` | `boolean` | Open images dropped onto it. Default `true`. |
| `showOpenButton` | `boolean` | Show the Open button when there's no image. Default `true`. |
| `emptyState` | `ReactNode` | What to show before an image is loaded. |
| `padding` | `number` | Space around the photo in px. Default 24. |
| `children` | `ReactNode` | Your own layers, drawn over the photo. |