Image Annotate
Draw arrows, shapes, and text on images with full control.
Image Annotate lets you "Draw arrows, shapes, and text on images" — six tools (Arrow, Rectangle, Circle, Line, Text, Freehand), a Color picker, and a Stroke slider (1–20) with a Font Size slider (8–72) that appears for the Text tool. A live overlay canvas maps mouse coordinates into source-image pixel space as you drag; Undo (icon) removes the last annotation and Trash clears all.
Once at least one annotation exists, "Export Annotated Image" redraws the source at full resolution and bakes every stroke into the pixels — arrow heads sized min(len*0.3, 20), rectangles, ellipses, lines, fillText, and freehand polylines. PNG sources export as PNG; everything else re-encodes as JPEG 0.92 with the original filename. All drawing and export run locally on canvas — no upload, no network.
How it works
Annotations live in Redux annotateSlice as objects {id, type, x/y/x2/y2, color, strokeWidth, text?, fontSize?, points?}. The overlay canvas scales getBoundingClientRect mouse coordinates to image pixel space so placements are resolution-independent. The Text tool opens the browser prompt('Enter text:') on click and stores the string at the click point.
On export, annotateImage draws the source image first, then renderAnnotations walks the list: arrows compute a headLen, rectangles use strokeRect, circles become ellipses, lines stroke directly, text fillText, and freehand draws a polyline through stored points. Defaults from the Zod schema: strokeWidth 3 (1–20), color #ff0000, fontSize 24 (8–72). toBlob emits PNG for PNG sources else JPEG 0.92 — pure Canvas 2D, fully offline.
How to use
- Drop one image into the dropzone (accept image/*).
- Pick a tool from Arrow, Rectangle, Circle, Line, Text, or Freehand.
- Set "Color" and "Stroke" (1–20); when the tool is Text, also set "Font Size" (8–72).
- Drag on the canvas to place shapes — the Text tool opens the "Enter text:" prompt on click.
- Use the Undo icon-button (removes the most recent annotation) or the Trash icon-button (clears all).
- Click "Export Annotated Image" (appears once annotations exist; button reads "Exporting...").
- Click "Download" for the baked file, or "Start Over" to begin again.
Tips
- The export button only appears when annotations.length > 0 — draw something first.
- Coordinates are stored in source-image pixel space, so exports stay sharp at full resolution regardless of preview zoom.
- Arrow head length is min(len*0.3, 20) px — short arrows get proportionally larger heads.
- Output keeps PNG for PNG sources; other formats re-encode as JPEG 0.92 — export PNG sources when transparency matters.
Image Annotate FAQ
Do annotations stay editable after export?
No — export flattens annotations onto the pixels; edit before exporting.
What does Undo remove?
The most recent annotation (annotationRemoved on the last id); the Trash button clears every annotation at once.
Is text placement free-form?
Yes — clicking with the Text tool prompts for a string and places it at the click point with your chosen Font Size and Color.
Are annotations uploaded?
No — all drawing and export are local canvas operations; there is no network or AI.
Which format is exported?
PNG if the source is PNG, otherwise JPEG at quality 0.92, keeping the original filename.
Credits
- Canvas 2D API — Live overlay drawing and full-resolution export