Joplin supports inserting and editing drawings. On mobile, this is built in. On desktop, this is supported through the [Freehand Drawing plugin](https://joplinapp.org/plugins/plugin/io.github.personalizedrefrigerator.js-draw/).
## Core features
- Inserting and manipulating drawings, images, and plain text.
- Drawing with a stylus and/or touchscreen.
- Embedding multiple drawings in the same note.
- A [very large zoom range](#large-zoom-range)
## On mobile
### Adding a drawing
<figure>
<imgsrc="/images/draw/add-new-image.svg"alt=""/>
<figcaption>The note actions menu includes a "Draw picture" option.</figcaption>
</figure>
Clicking "Draw picture" adds a new drawing to the note. When Joplin's note viewer is open, drawings are added to the end of the note. In editing mode, drawings are added at the cursor.
### Editing an existing drawing
Existing drawings can be opened and edited from the note viewer.
<figcaption>An existing drawing can be edited by: 1. tapping on the drawing, then 2. pressing the "edit" button.</figcaption>
</figure>
## On desktop
With the [Freehand Drawing plugin](https://joplinapp.org/plugins/plugin/io.github.personalizedrefrigerator.js-draw/), the UI for adding and editing drawings on desktop is slightly different.
Here, the "insert drawing" button is part of the main editor toolbar:
<figcaption>Clicking on the pen icon in the toolbar opens a full-screen drawing dialog. As on mobile, clicking "Exit" gives the option to save or discard changes.</figcaption>
<figcaption>In the Rich Text editor, double-clicking allows editing an existing drawing. This also works in the markdown viewer.</figcaption>
</figure>
For more ways to edit existing drawings on desktop, see the [Freehand Drawing plugin's FAQ](https://joplinapp.org/plugins/plugin/io.github.personalizedrefrigerator.js-draw/#faq).
<figcaption>The top of the editor includes options for saving, closing, and undo/redo.</figcaption>
</figure>
Actions for managing changes are at the top of the screen:
- **Close**: Hides the editor. If there are unsaved changes, this gives the option to save or discard them.
- **Save**: Save changes to the drawing, *without* closing the editor.
- **Undo**: Reverts the last change to the drawing.
- **Redo**: Redoes an undone change.
:::note
Long-pressing on a toolbar button shows a brief description. For example, long-pressing on the undo button shows "undo":
:::
### Tools
Clicking on an unselected tool switches to that tool. Clicking an already-selected toolbar button allows changing that tool's settings:
<figure>
<imgsrc="/images/draw/show-pen-menu.svg"alt=""/>
<figcaption>Clicking on the pen tool shows a menu that includes color options, different pen styles, shapes, and autocorrect.</figcaption>
</figure>
Most tool menus have a help button (<imgalt="help"src="/images/draw/help-icon.png"width="30"/>) that shows additional information about the different available settings.
## How are drawings saved?
Drawings are saved as Joplin resources using the [SVG image format](https://en.wikipedia.org/wiki/SVG).
This means that it should be possible to view and/or edit and view drawings in other apps that support SVG:
<figcaption>A drawing is shown in Joplin's note viewer, Inkscape, and GNOME Image Viewer. Inkscape doesn't support all features of SVG used by Joplin — only solid-color lines are visible.</figcaption>
</figure>
## Other features
### Large zoom range
The drawing tool has a very large zoom range by default. Among other things, this can be used to provide additional details or clarification to notes.
- **Rotation locking**: By default, touch gestures can rotate the screen. Rotation locking prevents the screen from rotating.
- **Touchscreen panning** prevents the touchscreen from drawing. Instead, all touch gestures move the screen. This is particularly useful on tablets with a stylus.
<figcaption>The hand tool menu includes "touchscreen panning" and "lock rotation" options, in addition to buttons to change the zoom level.</figcaption>
</figure>
### Picking a color from the screen
Color pickers include a "pick color from screen" tool:
<figcaption>Changing which part of the image will be shown in the image can be done by 1) selecting part of the image, 2) opening the selection menu and clicking "resize image to selection".</figcaption>
</figure>
When opening the note viewer again, the image will be cropped to the region selected above.
To un-crop an image, use "Auto-resize" in the "page" menu:
<figcaption>Checking and un-checking "Auto-resize" in the page menu is another way to give a drawing a specific size. When checked, the full drawing will be shown in Joplin's note viewer.</figcaption>
