# Images and drawings

Pictures from your device or the clipboard, and drawings made with a pen, shapes, text and inks, kept in the document and synced like the words around them.

An image is a block of its own, between the paragraphs. A drawing is a block too: a canvas, as wide as the text, that holds strokes, shapes, text and pictures. Both sync with the rest of the document, so everyone with it open sees the same picture.

## Images

### Adding an image

- **Paste it** on the web: a screenshot or a copied picture becomes an image block after the block the caret is in. With the caret in a table cell, the image joins the cell; with the caret in a drawing, it goes into the drawing ([below](#pictures-in-a-drawing)).
- **Image** in the slash menu (also found by typing `photo` or `picture`) opens the file picker of your browser or your phone and adds the image after the block the caret is in. In a table cell, the cell menu has **Image** as well ([Tables](/docs/tables/)).

Phones cannot paste images yet: **Image** is the way to add one there.

### Where an image is kept

An image of 256 KB or less is kept inside the document. It syncs with the words and shows offline.

A larger image is uploaded while you are signed in and online, and the document keeps its address: every device fetches the picture from there. When the upload cannot happen (you are offline or signed out, or it fails), the image is kept inside the document instead, where it stays. A large picture kept inside makes every copy of the document larger, so big pictures are best added while you are online. [Offline and sync](/docs/sync/) explains signing in and syncing.

A plain box stands in for an image until it has loaded, and stays when the picture cannot be fetched.

### Moving, resizing and removing

- **Move** an image with its grip in the margin, like any block ([Writing and formatting](/docs/writing/)).
- **Resize** it with the round knob at its bottom-right corner, which shows when the pointer is over the image or the image is selected. Drag it to change the width, from 32 pixels up to the width of the text; the height follows.
- **Remove** it by clicking it and pressing `Backspace` or `Delete`, or with **Delete block** in its grip's menu, which asks first.

## Drawings

### Making a drawing

**Drawing** in the slash menu (also found by typing `sketch` or `pen`) adds a drawing 240 pixels tall after the block the caret is in, with the pen already in hand. The ink is your accent colour until you pick another.

### The drawing tools

While the caret is in a drawing, its tools sit above its top-right corner:

| Tool | What it does |
| --- | --- |
| The lock and the pen | While nothing draws, a lock: **Unlock the drawing and draw** picks up the pen. While the pen draws, its button is filled, and **Lock the drawing** puts it down. While a shape, the text tool or the eraser is in hand, **Draw with the pen** switches to the pen |
| **Shapes** | Line, Arrow, Rectangle, Ellipse, Triangle, Diamond and Star. Drag from one corner of the shape to the other |
| **Text** | A size of 12, 16, 24, 32, 48 or 64 px. Then press where the words go and type |
| **Ink colour** | Accent, Black, Grey, Red, Orange, Yellow, Green, Blue and Purple. The button shows the ink, and a new colour applies to the tool in hand |
| **Download the drawing as an image** | Saves the drawing as a PNG file, on the web |
| **Erase: remove what is pressed** | The eraser. Each press removes the topmost thing under it: a stroke, a shape, a text or a picture. **Put the eraser down** stops |
| **Clear the drawing** | Removes everything in the drawing, after asking (**Clear the drawing?**, then **Clear**). An empty drawing clears without asking, and undo brings a cleared drawing back |

`Escape` puts any tool down, and undo takes back strokes like any other edit.

### Straight lines and even shapes

Hold `Shift` while you draw:

| Tool | With `Shift` |
| --- | --- |
| The pen | A straight segment from where `Shift` went down, snapped to horizontal, vertical or diagonal |
| Line and Arrow | Snapped to horizontal, vertical or diagonal |
| Rectangle, Ellipse, Triangle, Diamond and Star | A square box: a square, a circle, an even star |

### Text on a drawing

Pick a size from **Text**, press where the words go, and type: the line sits level with the point you pressed. `Backspace` takes back a letter. `Enter` places the line and starts the next one under it, and `Enter` on an empty line ends the typing. `Escape` places the words and puts the tool down, and a press anywhere else places them too. Placed text can be erased, but not edited.

### Pictures in a drawing

On the web, paste an image while the caret is in a drawing and it lands in the drawing's top-left corner at its own size, with handles:

- drag the picture to move it;
- drag a corner to resize it (`Shift` keeps its proportions);
- drag the round knob above it to rotate it (`Shift` turns it in steps of 15 degrees).

`Enter` locks the picture in, and so does a press anywhere else; `Escape` locks it in and puts the tool down; `Backspace` or `Delete` removes it. When a picture that is not rotated locks in, any part of it outside the drawing is cropped away, and a picture wholly outside is removed. Once locked in, a picture stays where it is; the eraser can remove it.

### A drawing's size

The small bar in the middle of a drawing's bottom edge is its resize grip. Drag it to make the drawing taller or shorter, from 40 to 2,000 pixels.

### On a phone

The pen, the shapes and the eraser work with a finger. `Shift` needs a hardware keyboard, and the download works on the web only for now.

### Drawing together and exports

Several people can draw in one drawing at the same time, and every stroke is kept. An HTML export includes drawings as vector pictures; Markdown and Typst have no form for them and leave them out, and an `.ent` file keeps them ([Import and export](/docs/import-export/)).