✏️ Screenshot Annotator

100% local. No uploads. No account. Free.

User Manual

Overview

Screenshot Annotator is a canvas-based image annotation tool. You load an image onto the canvas, place annotation objects on top of it (shapes, text, freehand lines), then export the finished result as a PNG, JPEG, or WebP file — or copy it straight to the clipboard.

Each annotation is a separate object on the canvas: you can select, move, resize, reorder, lock, duplicate, or delete individual annotations at any time. The original image is never modified — annotations live in a separate layer above it.

Loading an Image

There are four ways to bring an image into the annotator:

• Paste — copy any image to the clipboard (e.g. with Print Screen or a snipping tool), then press Ctrl+V inside the app.
• Drop — drag an image file from your file manager and drop it onto the canvas area.
• Open file… — click the button to browse for an image file on your computer (PNG, JPEG, WebP, GIF, etc.).
• Capture screen — click Capture screen to trigger the browser's built-in screen-share picker. Select a window or your entire desktop; the captured frame is loaded as the base image.
• From URL — enter a public image URL to load the image directly into the canvas.

Canvas Navigation

• Zoom — scroll the mouse wheel to zoom in or out. The current zoom level is shown in the status bar.
• Pan — hold Space and drag, or use the middle mouse button to pan around the canvas.

Annotation Tools

Select an annotation tool from the toolbar, then click or drag on the canvas to create an annotation. Each tool draws a new object that you can later move, resize, or style independently.

Style options (apply before or after placing an annotation)

• Color — pick a preset colour or enter a custom hex/CSS value.
• Stroke width — controls the line thickness of outlines and freehand strokes.
• Opacity — sets the transparency of the annotation (0 = invisible, 100 = fully opaque).
• Dashed — toggles a dashed line style for strokes and shape outlines.
• Shadow — adds a drop shadow to the annotation for better contrast against the image.
• Fill / Fill color — when enabled, fills closed shapes with the chosen colour.
• Text size — controls the font size for text annotation objects.

Canvas background

The canvas background colour can be changed from the Canvas section of the style panel. This affects the area outside the image (the "matte") and is included when exporting.

Selecting and Moving Annotations

• Click any annotation to select it. Selection handles appear on its corners and edges.
• Drag a selected annotation to reposition it.
• Drag a corner or edge handle to resize it.
• Click on empty canvas space to deselect.

Object Toolbar Actions

When an annotation is selected, the following actions become available in the toolbar:

• ⧉ Duplicate — creates an identical copy of the selected annotation, offset slightly.
• 🔒 Lock / Unlock — locks the annotation in place so it cannot be accidentally moved or edited. Click again to unlock.
• ⬆ / ⬇ Layer order — moves the selected annotation one step forward or backward in the stacking order relative to other annotations.
• 🗑 Delete — removes the selected annotation. This can be undone with Ctrl+Z.

Image Transformations

These actions transform the base image itself (not individual annotations):

• ⟲ Rotate CW — rotates the image 90° clockwise.
• ⟳ Rotate CCW — rotates the image 90° counter-clockwise.
• ⇋ Flip horizontal — mirrors the image left-to-right.
• ⥯ Flip vertical — mirrors the image top-to-bottom.
• Resize — opens a resize dialog where you can set a new canvas/image size in pixels or as a percentage.

Undo / Redo

• ↶ Undo — reverts the last action. Keyboard shortcut: Ctrl+Z.
• ↷ Redo — reapplies the last undone action. Keyboard shortcut: Ctrl+Y or Ctrl+Shift+Z.

OCR — Local Text Extraction

Click OCR to extract text from the current image using a fully local OCR engine (no internet connection required, nothing is sent to a server). The first run may take a moment while the engine loads. Once recognition is complete, the extracted text appears in a panel where you can review and copy it.

Saving

Click Save to store the current state of your annotated image in the browser's localStorage, so you can continue working after closing and reopening the app.

Exporting

Click Export to open the export dialog:

• Format — choose PNG (lossless), JPEG (smaller file, lossy), or WebP (modern, efficient).
• Quality — for JPEG and WebP, sets the compression quality (higher = better quality, larger file).
• Copy to clipboard — copies the exported image directly to the clipboard so you can paste it into another app.
• Download — saves the exported image as a file to your computer.

Copy

The Copy button in the main toolbar copies the current canvas (image + all annotations) to the clipboard instantly, without opening the export dialog. Useful for quickly pasting into email, chat, or documents.

New

Click New to clear the current canvas and start fresh. You will be prompted to confirm if there are unsaved changes.

Dark / Light Mode

Click the 🌓 toggle to switch between dark and light interface themes. The theme preference is saved and restored on next launch. Note: the theme affects the application chrome only — the canvas and exported image are not affected.

Keyboard Shortcuts

Click the ? button in the toolbar to see the full list of keyboard shortcuts. Common ones:

About this tool