# RedactionCanvas

**Kind:** Component

**Source:** [`atloria-monorepo/apps/web/src/app/app/projects/[id]/components/StepEditor.tsx`](https://github.com/sherkety/atloria/blob/main/atloria-monorepo/apps/web/src/app/app/projects/[id]/components/StepEditor.tsx#L386)

Draw/clear rectangular redaction regions on a step's screenshot. Coordinates are stored as PERCENT (0-100) of the natural image so they survive re-shoots at any viewport. Drag to add a box; click an existing box to remove it.

## Props

| Name | Type | Required | Default |
|---|---|---|---|
| `src` | `string` | - | - |
| `boxes` | `RedactBox[]` | ✓ | - |
| `onChange` | `Function` | ✓ | - |

## Diagram

```mermaid
graph TD
    component_RedactionCanvas_2030974d["RedactionCanvas"]
    class component_RedactionCanvas_2030974d rootComponent
```

## Relationships

- USES_HOOK → `useRef`
- USES_HOOK → `useState`

## Referenced By

- `StepEditor` (RENDERS)