Annotation tools — deep dive

DrawShot v1.4.8 ships with 11 tools. Each is single-key, each can be styled with the 4 preset colors + custom wheel and 3 stroke weights. This page is the long-form reference.

For the keyboard-only version, see keyboard-shortcuts.md.

Draw — D (the default)

Freehand pen. Drag to draw, release to commit. This is the tool DrawShot selects on launch — most quick marks (a circle around a number, a squiggle next to a button) end up here.

• Click + drag lays the stroke down.
• Uses the current color + stroke weight from the toolbar.
• Use when: you want a fast, organic mark — annotations that say "look here" without being too precise.

Arrow — A

Straight arrow with an arrowhead at the release end. Great for "this thing connects to that thing" or "this is the problem."

• Click + drag from tail → head.
• Arrowhead size scales with stroke weight.
• Use when: pointing at a specific UI element from outside its area.

Rectangle — R

Outline rectangle. Used to box a region of interest.

• Click + drag to define corners.
• Outline only — fill is intentionally not supported (it would hide the screenshot).
• Use when: framing a multi-element region (e.g. a whole card, a paragraph, a chart).

Circle — O

Outline ellipse. Drag horizontally for a wide ellipse, vertically for a tall one — DrawShot does not constrain to a perfect circle by default.

• Click + drag corner-to-corner of the bounding box.
• Outline only.
• Use when: calling out a single rounded thing (an avatar, a button, a single number).

Highlight — H

Translucent stroke that overlays content without hiding it — like a real highlighter. Wide stroke by default.

• Click + drag to lay the highlight.
• Uses the current color at ~35% opacity.
• Use when: emphasising a word or row of text without obscuring it.

Eraser — E

Click any existing annotation to delete it. No "select then delete" two-step — just click.

• Click a stroke / shape / callout / step number / blur rectangle to remove it.
• The original screenshot pixels are never touched.
• Use when: you over-annotated, or you want to redo a single mark without ⌘Z-ing through everything.

Stamp — S

Drops an emoji sticker from a picker.

• Click anywhere — a picker pops; select an emoji to drop it.
• Stamps scale with stroke weight (small / medium / large).
• Use when: emotional signal — ✅ "shipped", ⚠️ "broken", 🔥 "fast", 👀 "look here".

Blur — B

Drag a rectangle to redact a region with a permanent 10px mosaic. The blurred pixels are written into the saved file — there's no "unblur."

• Click + drag to define the blur area.
• The mosaic is rendered on top of the pixels and baked in on ⌘S.
• Use when: hiding emails, API keys, customer data before sharing.

Note on PII: the blur tool produces visually-blurred pixels. If you're sharing a screenshot in a context where someone might try to reconstruct the original (e.g. legal), drag a Rectangle over the area and use Ink (#1A1A1A) as the color — that writes solid pixels on top.

Crop — C

Drag a selection to define a region. A confirm bar appears with ✓ (Enter) and ✗ (Esc).

• Click + drag to define the crop region.
• Enter confirms — the canvas dimensions are trimmed.
• Esc cancels.
• ⌘Z still works after a crop (rare for crops to bump the canvas, but DrawShot remembers).
• Use when: removing UI chrome you don't want in the screenshot (a sidebar, a status bar, browser tabs).

Callout — L

Click → a textarea overlay appears → type → click out → the text becomes a speech bubble with a tail that auto-points up or down based on Y position on the canvas.

• Click on the canvas to start a callout.
• Type your text — multi-line is fine.
• Click outside to commit.
• Double-click an existing callout to re-edit.
• Use when: adding context or a question — "why is this number red?", "fix this before Tuesday."

Step numbers — N

Click to drop numbered circles. Each click auto-increments: 1, 2, 3…

• Click to drop the next number.
• Re-entering the tool resets the counter to 1.
• Uses the current color.
• Use when: walking someone through a sequence — "do 1, then 2, then 3."

Style — color, stroke weight, custom

4 preset colors

The active color is shown as the primary swatch in the toolbar. Click any swatch to switch.

Custom color wheel

Click the wheel button next to the swatches to open a full system color picker. The choice persists until you switch back to a preset.

Stroke weight

Three buttons in the toolbar: Thin (2 px), Medium (4 px, default), Thick (8 px).

The same weight applies to Draw, Arrow, Rectangle, Circle, Highlight, and Callout outlines.

Tool combinations that compound

A few flows worth memorising:

1. The point-and-explain — A arrow + L callout. Drag an arrow at the problem, drop a callout next to it explaining what's wrong. The two-tool combo is the most common annotation in product reviews.
2. The numbered walkthrough — N step numbers on three elements + one L callout per step on the side. Excellent for "do this in order" docs.
3. The redaction — B blur over the email / API key in a screenshot you're posting publicly. Drag a rectangle slightly larger than the sensitive region for safety.
4. The crop-then-frame — C crop tight to the relevant area first, then R rectangle around the specific element you want to draw attention to. Less context = less noise.

drawshot.dev · v1.4.8 · 11 tools · 4 colors + custom wheel · 3 stroke weights