Screenshot Annotation Tool for Bug Reports

Bad bug reports waste everyone's time: a tester writes "the button doesn't work" with no screenshot, or pastes a raw screenshot where the actual problem is invisible. Developers then spend half the fix cycle just reproducing what was reported. Professional teams solve this with annotated screenshots — the exact failing element circled, numbered steps drawn over the flow, sensitive customer data blurred out. This project builds that tooling as a desktop application: a fast, offline annotation editor purpose-built for bug reporting. It accepts screenshots from the clipboard or from image files, offers a focused set of annotation tools (arrow, rectangle, ellipse, blur, text, numbered steps), and exports clean annotated images ready to attach to Jira, GitHub issues or emails. Because it is a genuine utility with a real workflow behind it, the project also teaches practical software engineering: canvas rendering, undo/redo state management, file I/O and desktop packaging.

1. The user captures a screen with the OS screenshot tool and pastes it into the app, or opens an existing PNG/JPG file.
2. The image is drawn onto an HTML5 canvas at its native resolution, inside a desktop window built with Electron.
3. The user picks a tool from the toolbar — arrow, rectangle, ellipse, blur, text or numbered step — and drags or clicks on the canvas.
4. Each annotation is stored as a vector object (type, coordinates, text) in an undoable list, and the canvas re-renders from the base image plus the annotation stack.
5. The blur tool pixelates the selected region by downscaling and upscaling it, destroying the underlying detail irreversibly.
6. On export, the composed canvas is serialized to PNG or JPG and saved to disk, or copied back to the OS clipboard for pasting into a ticket.

Tech stack:

• Electron (desktop shell, cross-platform)
• HTML5 Canvas API (rendering and annotations)
• JavaScript (application logic, undo stack)
• Node.js file-system APIs (open/save)
• CSS (toolbar and panel UI)

• [Arrow, box and ellipse tools] Draw attention to the exact UI element that fails, with adjustable stroke width and a high-visibility annotation red that stays readable on any background.
• [Pixel-blur redaction] Drag over customer names, emails or API keys to pixelate them before a screenshot leaves the machine — essential for support teams handling real user data.
• [Auto-numbered steps] Click through a multi-step reproduction flow and the tool numbers each click 1, 2, 3 automatically, turning "steps to reproduce" into a picture.
• [Text callouts] Pin short notes directly on the screenshot with a contrasting label background so the explanation sits next to the evidence.
• [Clipboard-first workflow] Paste a screenshot straight from Print Screen, annotate, and copy the result back to the clipboard — no intermediate files needed.
• [Offline PNG/JPG export] Save the annotated image locally in lossless PNG or compact JPG; nothing is uploaded anywhere, which matters for internal or NDA-covered screens.
• [Undo and clear] Full undo stack for annotations plus one-click clear, so experimenting with markup never destroys the underlying screenshot.

• Complete Electron desktop application source code
• Packaged installers/build scripts for Windows (and macOS/Linux build config)
• User manual: capture → annotate → export workflow with examples
• Project report PDF (background, canvas rendering design, undo architecture, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (canvas API, Electron architecture, event handling, file I/O)

• Screen capture itself is done by the OS tool (Print Screen / Snipping Tool); the app annotates, it does not capture — a capture hotkey is listed as future scope.
• Annotations are burned into the exported image; the project file format for re-editable annotations is a planned extension, not included.
• Very large screenshots (8K+) may render slowly on low-RAM machines since the full bitmap is held in memory.
• The blur is destructive by design — there is no "unblur" after export, which is a privacy feature, not a bug.
• No cloud sync or team library; the tool is deliberately single-user and offline.