How to Annotate Images Online – Shapes, Arrows & Text

Need to explain a screenshot, mark up a photo, or add callouts to a tutorial image? ROCKIMG’s free Annotate Image tool at annotate-image.html lets you draw rectangles, ellipses, arrows, lines, and freehand paths—or click anywhere to place custom text with your own color and size. Everything runs in your browser; files are not uploaded to ROCKIMG servers.

Published on: June 20, 2026

What is image annotation?

Image annotation means adding visual marks on top of a picture: boxes around UI elements, arrows pointing to buttons, circles around faces, or text explaining a step. Unlike editing the photo itself (cropping, filters, color), annotation layers communicate where to look and what it means.

Common use cases include:

• Software tutorials — arrows and rectangles on screenshots.
• Bug reports — highlight the broken control or error message.
• Design feedback — mark spacing, alignment, or copy issues.
• Education — label parts of a diagram or map.
• Social posts — quick callouts on memes or product photos.

What the Annotate Image tool offers

On annotate-image.html, you upload once, mark up in a side-by-side workspace (settings on the left, preview on the right), then apply and download a PNG. Supported formats include JPG, PNG, WebP, and other common images up to 20 MB.

• Six drawing tools — Rectangle, Ellipse, Arrow, Line, Freehand, and Text.
• Shape styling — stroke color, optional fill with opacity, stroke width (1–12 px), solid or dashed lines.
• Click-to-type text — select Text mode, click on the image, type your caption, press Enter; choose text color and font size (10–72 px) before placing.
• Multiple annotations — add as many shapes and text labels as you need before applying.
• Undo Last & Clear All — fix mistakes without re-uploading.
• Apply Annotations — render all marks into a full-resolution output canvas.
• Local processing — your image stays on your device during editing.

Step-by-step: annotate an image online

Step 1: Upload your image

Open annotate-image.html and drag your file onto the upload zone, or click to browse. The image appears in the preview panel on the right.

Step 2: Choose a tool

In the left Annotation Settings panel, pick the mode that fits your goal:

• Rectangle — drag a box around a button, paragraph, or region.
• Ellipse — circle an icon, face, or round badge.
• Arrow — drag from start to end to show direction or flow.
• Line — underline text or connect two points with a straight segment.
• Freehand — sketch irregular paths or handwritten-style marks.
• Text — click on the image to type a standalone label at that spot.

Step 3: Customize stroke, fill, and line style

For shape tools, adjust Stroke color, optional Fill with opacity, Stroke Width, and Line Style (solid or dashed). Green or red strokes work well on neutral backgrounds; semi-transparent fill can emphasize an area without hiding content.

For Text mode, the panel switches to Text Color and Font Size. Set these before clicking on the image.

Step 4: Draw or place text on the image

Click and drag on the preview for shapes, arrows, lines, and freehand paths. For text, single-click where you want the label to start, type in the inline input, then press Enter to confirm (Esc cancels). Repeat to add more annotations.

Step 5: Apply and download

When you are satisfied, click Apply Annotations. The result appears below the workspace. Click Download to save annotated-image.png at full resolution.

Best tools for common annotation tasks

Annotate Image vs. other ROCKIMG tools

Choose the tool that matches your goal:

• Annotate Image — shapes, arrows, lines, freehand, and click-to-place text for explanations and callouts.
• Highlight Image — semi-transparent color washes over text; content stays visible underneath.
• Blur Photo — hide faces, names, or sensitive data instead of marking them.
• Add Border — decorative frames around the whole image, not internal markup.

For tutorial screenshots and UI walkthroughs, Annotate Image is usually the fastest option because arrows and text live in one workspace.

Tips for clean, professional annotations

• Stick to one or two stroke colors per image so callouts look intentional, not cluttered.
• Keep arrow lines short and direct—point the head at the exact pixel you mean.
• Use dashed rectangles for “suggested” areas and solid lines for confirmed issues.
• Place text labels near the subject but not on top of critical detail when possible.
• Preview at full size before downloading; thin strokes on 4K screenshots may need a wider stroke width.
• Save the original unmarked file separately if stakeholders may ask for a clean version later.

Privacy and format notes

Processing happens in your browser using JavaScript and the Canvas API. ROCKIMG does not store uploaded files on its servers for this tool. Export is PNG to preserve sharp lines and text; re-save as JPG elsewhere if you need a smaller file for email.

Conclusion

You do not need desktop software to annotate images online. ROCKIMG’s Annotate Image tool combines rectangles, ellipses, arrows, lines, freehand drawing, and click-to-place text in one private, browser-based workflow—with undo, multiple marks per file, and a full-resolution PNG download.

← Back to all tutorials