Screenshot Annotator

Key features

• Two ways to start: a one-frame screen capture via your browser's share dialog, or open any image file — the fallback keeps mobile browsers (which lack screen capture) fully supported.
• Six annotation tools: freehand pen, semi-transparent highlighter, straight arrows with proper arrowheads, rectangles, click-to-place text, and crop.
• Seven markup colors and an adjustable stroke width that scale correctly to the source resolution, so lines look the same thickness in the exported file as on screen.
• Real undo/redo (25-step memory-capped trail) with keyboard shortcuts, plus crop with full undo back to the original frame.
• Pointer-event drawing — mouse, touch and stylus all work, with coordinates scaled from CSS size to source pixels so annotations land exactly where you point.
• Downloads a timestamped PNG (screenshot-annotated-<timestamp>.png); the screen share's video track is stopped the moment the frame is taken — no lingering capture indicator.

How it works

1. 1

   Capture or open an image

   Click Capture screen and pick a tab, window or screen in the browser dialog — one frame is grabbed and the capture stops. On mobile or if capture is unavailable, use Open image instead.

2. 2

   Annotate

   Pick a tool and color, then draw directly on the canvas. Pen and highlighter follow your pointer, arrows and rectangles drag out, text places with a click.

3. 3

   Crop or refine

   Drag a crop region and confirm to trim the canvas, undo mistakes (Ctrl/Cmd+Z), redo, or clear all annotations to get the pristine frame back.

4. 4

   Download the PNG

   One click saves a timestamped PNG of exactly what you see, at the source resolution. Permission denied? The page offers Retry and the open-image path instead of a dead end.

Tips for better results

• 💡Highlighter is deliberately translucent — layer strokes over text and the text stays readable.
• 💡Undo remembers 25 steps (a deliberate memory ceiling for 4K captures), and clearing annotations also returns the pre-crop frame.
• 💡If screen capture is blocked by the browser, the page explains and offers both a retry and the image-upload route — nothing dead-ends.
• 💡Text size follows your stroke width slider: increase it before placing text for bigger captions.
• 💡The exported PNG always has the source capture's resolution — zooming the preview on screen never reduces output quality.

Frequently asked questions