Image & Photo

Photo Annotator

Add arrows, callouts, rectangles, freehand drawings, and labels on top of any photo or screenshot — drag to reposition, undo any time, export as PNG, JPG, or WebP.

Drop a photo to annotate

or click to browse — JPG, PNG, or WebP up to 50 MB.

Private by design. Your photo, the annotations, and the export are all processed in your browser via the Canvas API. Nothing leaves your device.

What is a photo annotator?

A photo annotator lets you draw on top of a photo or screenshot to highlight, point at, or label something. Unlike a full editor it doesn't change the underlying pixels — your callouts live as a layer of vector-style shapes (arrows, rectangles, text, freehand strokes) that get baked onto the image only when you export. That makes it perfect for bug reports, design feedback, recipe steps, kid's homework markup, real-estate listings, and the daily 'see this thing right here' problem. This tool gives you five tools (select, text, arrow, rectangle, freehand), a color palette plus full custom-color picker, and four stroke widths. Everything runs in your browser, so screenshots with sensitive content never leave your device.

How to annotate a photo

1
Drop in a photo or screenshot
Drag a JPG, PNG, or WebP file onto the upload area, or click to pick from your device. Screenshots, phone photos, product shots — anything browsers can render works.
2
Pick a tool and color
Use Arrow to point at something, Rectangle to box it, Freehand to circle or scribble, and Text to add a label. Pick a color from the palette or open the custom-color picker for any hex value.
3
Click and drag on the image
Drag to draw arrows and rectangles. Drag with Freehand to scribble. With the Text tool, type your label first, then click on the photo to drop it where you want.
4
Reposition or undo
Switch to Select, then drag any annotation to move it. Click Undo to remove the last one, or click an annotation and press Delete. Clear all wipes the layer in one step.
5
Export the annotated photo
Pick PNG (lossless, recommended for screenshots), JPG (smaller, photos), or WebP (best size-to-quality), then click Download. The annotations are baked into the export at full source resolution.

How browser-side annotation works

1. Decode the source image with createImageBitmap() — native, no library.
2. Render the photo to an on-screen canvas at preview scale (≤ 900 px on the longer side).
3. Each annotation is stored as a typed object (kind, coords, color, stroke).
4. On export, draw the original-resolution image to a fresh canvas first.
5. Replay every annotation on top using ctx.drawImage / strokeRect / etc.
6. Encode with canvas.toBlob(format, quality) and offer it as a download.

Storing annotations as objects rather than baking them straight onto the pixels has two real benefits. First, you keep the original photo intact — undo, delete, and reposition are all just state edits, no destructive 'erase' tool needed. Second, the export uses the full source resolution: the on-screen preview may scale down to 900 pixels, but when you click Download the tool re-rasterizes everything against the original-size image. Coordinates are stored in image-space and scale-converted on render, so a 4032×3024 phone screenshot produces a 4032×3024 annotated export with crisp arrowheads and text.

Reference: MDN — CanvasRenderingContext2D

Common annotation jobs

Photo	Best tools to use
App screenshot for a bug report	Red rectangle around the broken UI + red arrow with a 'this button is misaligned' text label. Stick to one accent color so the markup reads as a single message.
Recipe photo with step-by-step labels	Yellow arrows numbered 1, 2, 3 pointing at ingredients + small text labels for each. Smaller text size (16–24 px) keeps the photo readable underneath.
Whiteboard photo from a meeting	Freehand circles around key boxes + text annotations for missing context. Use a high-contrast color (red or pink) so it shows on busy whiteboards.
Real-estate listing photo	Rectangles to highlight features (stainless appliances, hardwood, etc.), short text labels. Black with a subtle outline reads well on most interior shots.

When to use a photo annotator

Bug reports with red boxes and arrows that point at exactly the broken element.
Design feedback for stakeholders who don't want to log into Figma to leave a comment.
Step-by-step instructions on a single photo (recipes, repair guides, software walkthroughs).
Real-estate or product listings where you want to highlight specific features in-photo.
Classroom worksheet markup — circle the right answer, draw an arrow, add a sticky note.
Quick captions on a screenshot before pasting it into Slack, Discord, or an email.
Whiteboard or notebook photos that need callouts to be readable as standalone images.

Related tools

Background Remover

Cut out the subject from any photo with on-device AI — no upload required.

Image Compressor

Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.

Photo Editor

Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.

Meme Maker

Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.

Frequently asked questions

Are annotations baked into the photo, or are they a separate layer?

On screen they live as editable objects, so undo, delete, and drag-to-reposition all work. When you click Download, the tool rasterizes them onto a copy of the source image — the exported file is a flat photo with the markup permanently merged in.

Will my exports be lower resolution than the original?

No. The on-screen preview scales down to fit (max 900 px on the longer side), but the export uses the original image dimensions. Annotations are stored in image-space coordinates and re-rendered at full size, so a 4000-pixel-wide screenshot produces a 4000-pixel-wide annotated PNG.

Why does the text have a black outline I didn't ask for?

Plain text can disappear on light or dark backgrounds. The thin black outline keeps any label readable on a white whiteboard, a dark screenshot, or a busy photo. If you don't want it visible, pick a black text color and the outline will blend in.

Can I edit a label after I've placed it?

You can move it by switching to Select and dragging it, or delete it and place a new one with the corrected text. There is no in-place text edit yet — most users find it faster to delete-and-retype than to manage a focused text input.

Does freehand have any smoothing?

It captures every pointer move and joins them with rounded line joins, so a steady hand gives steady lines. There's no Bezier smoothing — that's a deliberate choice, since smoothing tends to round-off the exact gestures you wanted (a sharp arrowhead, a zigzag underline). Use the Arrow tool when you want clean geometry.

Are my photos uploaded anywhere?

No. The image is decoded, rendered, annotated, and exported entirely in your browser. There is no server round-trip. You can verify in your browser's network tab that nothing is sent after the page first loads.

What's the difference between this and the Photo Editor?

The Photo Editor adjusts the photo itself — brightness, contrast, color, crop, rotate. The Photo Annotator leaves the photo alone and adds a markup layer on top. Use the editor when you want to fix the photo, the annotator when you want to point at something in the photo.

Last updated 2026-04-28

What is a photo annotator?

How to annotate a photo

Drop in a photo or screenshot

Drag a JPG, PNG, or WebP file onto the upload area, or click to pick from your device. Screenshots, phone photos, product shots — anything browsers can render works.

Pick a tool and color

Use Arrow to point at something, Rectangle to box it, Freehand to circle or scribble, and Text to add a label. Pick a color from the palette or open the custom-color picker for any hex value.

Click and drag on the image

Drag to draw arrows and rectangles. Drag with Freehand to scribble. With the Text tool, type your label first, then click on the photo to drop it where you want.

Reposition or undo

Switch to Select, then drag any annotation to move it. Click Undo to remove the last one, or click an annotation and press Delete. Clear all wipes the layer in one step.

Export the annotated photo

Pick PNG (lossless, recommended for screenshots), JPG (smaller, photos), or WebP (best size-to-quality), then click Download. The annotations are baked into the export at full source resolution.

How browser-side annotation works

1. Decode the source image with createImageBitmap() — native, no library.
2. Render the photo to an on-screen canvas at preview scale (≤ 900 px on the longer side).
3. Each annotation is stored as a typed object (kind, coords, color, stroke).
4. On export, draw the original-resolution image to a fresh canvas first.
5. Replay every annotation on top using ctx.drawImage / strokeRect / etc.
6. Encode with canvas.toBlob(format, quality) and offer it as a download.

Common annotation jobs

Photo	Best tools to use
App screenshot for a bug report	Red rectangle around the broken UI + red arrow with a 'this button is misaligned' text label. Stick to one accent color so the markup reads as a single message.
Recipe photo with step-by-step labels	Yellow arrows numbered 1, 2, 3 pointing at ingredients + small text labels for each. Smaller text size (16–24 px) keeps the photo readable underneath.
Whiteboard photo from a meeting	Freehand circles around key boxes + text annotations for missing context. Use a high-contrast color (red or pink) so it shows on busy whiteboards.
Real-estate listing photo	Rectangles to highlight features (stainless appliances, hardwood, etc.), short text labels. Black with a subtle outline reads well on most interior shots.

When to use a photo annotator

Bug reports with red boxes and arrows that point at exactly the broken element.

Design feedback for stakeholders who don't want to log into Figma to leave a comment.

Step-by-step instructions on a single photo (recipes, repair guides, software walkthroughs).

Real-estate or product listings where you want to highlight specific features in-photo.

Classroom worksheet markup — circle the right answer, draw an arrow, add a sticky note.

Quick captions on a screenshot before pasting it into Slack, Discord, or an email.

Whiteboard or notebook photos that need callouts to be readable as standalone images.