Annotate images with arrows, shapes, text, highlights, and blur regions. Perfect for screenshot markup, tutorials, and documentation.
Add arrows, circles, text labels, rectangles, and other annotation shapes on top of images. Built for marking up screenshots, highlighting areas of interest in photos, or creating visual instructions. More structured than freehand drawing, each annotation is a separate, movable object.
Initializing in your browser…
Compare two images pixel-by-pixel. Multiple comparison modes: side-by-side, overlay, difference highlighting, onion skin, and slider. Perfect for visual regression testing.
Create memes with customizable text overlays. Add multiple text layers, adjust fonts, colors, and positions.
Convert images to Base64 encoded strings for embedding in CSS, HTML, or JavaScript. Multiple output formats available.
You need to mark up a screenshot with arrows and a callout to explain a bug in a ticket.
Input
bug.png + 2 arrows, a box, "broken here" label
Output
bug_annotated.png with the markup flattened in
Arrows, boxes, and text turn "it looks wrong" into an unambiguous report, which shortens the back-and-forth on a bug. The annotated copy is exported flattened so it renders the same everywhere.
Add arrows, circles, text labels, rectangles, and other annotation shapes on top of images. Built for marking up screenshots, highlighting areas of interest in photos, or creating visual instructions. More structured than freehand drawing, each annotation is a separate, movable object.
Mark up screenshots to clearly show where an issue occurs.
Add numbered steps and arrows to screenshots for how-to guides.
Annotate mockups with comments and change requests.
Create visual instructions by labeling interface elements.
Press A for the Arrow tool and drag from a caption toward a button; the tool draws a line and grouped triangular arrowhead in your stroke color. Switch to Rectangle (R) with no fill to box a region, then press T and click to drop editable IText labels, toggling Bold for emphasis. Download PNG composites everything at full resolution as annotated-<yourfile>.png.
Select the Highlight tool and drag over a paragraph or UI element; it lays down a rectangle filled with the current stroke color at 0.3 opacity so the content beneath stays visible. If you misplace it, switch to the Eraser and click it to remove just that object, then re-select another tool and continue.
The Image Annotator is built on Fabric.js v6 and treats every mark you add as an independent vector object rather than baking it into the image. Thirteen tools are available: Select, Pan, Arrow, Line, Rectangle, Circle (drawn as a Fabric Ellipse), Triangle, Star, Polygon, Freehand, Text, Highlight, and Eraser. Because each shape stays a live object, you can re-select, drag, resize, rotate, duplicate (Ctrl+D, which offsets the copy by 20px), flip horizontally or vertically, and reorder it with Bring Forward / Send Backward at any time before export. Selecting one or more objects pops up a floating control bar showing the selection count alongside duplicate, flip, layer, and delete buttons. The Eraser tool is object-based, not pixel-based: clicking an annotation removes that whole object (the background image is never touched).
Several tools have specific construction logic worth knowing. The Arrow tool draws a Fabric Line during the drag, then on mouse-up appends a triangular arrowhead Polygon whose length is Math.max(15, strokeWidth * 3) and groups the two into a single movable object. The Star tool generates a five-spike polygon and the Polygon tool generates a six-sided hexagon, both created at a base radius of 50 and scaled during the drag for smooth resizing. The Highlight tool draws a filled rectangle using the current stroke color at 0.3 opacity, so it acts like a translucent marker over the area beneath it. Text is added with Fabric's IText (inline-editable on click) in a system-ui font, with Bold and Italic toggles and a font-size dropdown offering 12, 16, 20, 24, 32, 48, 64, and 96px. Stroke color is chosen from a 10-swatch palette or a react-colorful hex picker, with a separate fill color (defaulting to transparent / 'No Fill') and stroke widths of 1, 2, 4, 6, 8, 12, or 16px.
Editing is non-destructive and reversible. The tool keeps an undo/redo history of up to 50 states, serialized with Fabric's toDatalessJSON, and history is committed only when a draw completes (on mouse-up or path:created) so partial 1x1 shapes are never recorded; Ctrl+Z undoes and Ctrl+Shift+Z redoes. The canvas zooms from 25% to 300% in 25% increments with a reset-to-fit button, and a status bar reports the image's native pixel dimensions, the live object count, and the current zoom. Single-key shortcuts switch tools (V Select, H Pan, R Rectangle, C Circle, L Line, A Arrow, P Pen/Freehand, T Text), and Delete/Backspace removes the selection. Export is a single Download PNG action that composites the original background and every annotation at full native resolution (using a 1/zoom multiplier so on-screen zoom never degrades output) and saves the file as annotated-<original-filename>.png. All processing runs in the browser via canvas; the image is loaded through an object URL and never uploaded.
Yes. Each annotation is a separate object that can be dragged, resized, and edited after placement.
No practical limit. Add as many as your image needs.
The tool is designed for annotating existing images. For drawing on a blank canvas, use the Drawing Canvas tool.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.