# Drawing mode

> DrawButton + DrawingControls on a blank page - sketches alongside images.

Source: https://docs.docmosaic.com/docs/examples/drawing

DocMosaic ships a freehand drawing mode alongside image sections. `Editor.DrawButton` toggles a "drawing" section into existence; `Editor.DrawingControls` is the side panel with the colour picker and brush-weight slider. Strokes persist on the section, so undo/redo replays them and the PDF export rasterises them at the right DPI.

Use this when users need to sign, annotate, or sketch - not when they need a full vector editor (DocMosaic isn't trying to be Excalidraw).

## Code

```tsx
'use client';

import { Editor } from '@docmosaic/react';
import '@docmosaic/react/styles.css';

export default function DrawingEditor() {
    return (
        <Editor.Root>
            <Editor.Properties />
            <Editor.Toolbar>
                <Editor.UndoButton />
                <Editor.RedoButton />
                <Editor.AddImageButton />
                <Editor.DrawButton />
                <Editor.DownloadButton />
            </Editor.Toolbar>
            <Editor.Pages />
            <Editor.Canvas>
                <Editor.Section />
            </Editor.Canvas>
            <Editor.DrawingControls />
            <Editor.Preview />
        </Editor.Root>
    );
}
```

Click `Editor.DrawButton` to drop a blank drawing section over the current page; the `Editor.DrawingControls` panel becomes interactive. Strokes are stored on the drawing `Section` - each one is a list of points with the active colour + weight at the time of drawing.

<Callout type="info">
    Strokes survive the PDF round-trip. The bundled `generatePDF` rasterises drawing sections at the
    document's stored point geometry, so a signature drawn at 200pt × 60pt prints crisp at 200pt ×
    60pt - no resampling.
</Callout>

## Try it

<StorybookEmbed id="editor-drawing-controls--default" />

## Related

-   [Editor.DrawButton](/docs/primitives/draw-button)
-   [Editor.DrawingControls](/docs/primitives/drawing-controls)
-   [Editor.ColorPicker](/docs/primitives/color-picker)
-   [Editor.BrushWeightSlider](/docs/primitives/brush-weight-slider)