Screen Annotation and Capture Tool

Bug reports, design feedback and tutorial-making all need the same thing: take a screenshot, draw on it, send it. The usual options are OS-specific snipping tools with one or two markup pens, or heavyweight editors that take a minute to open for a ten-second job. This project builds MarkShot, a browser-based annotation tool with a proper toolbelt: freehand pen, translucent highlighter, arrows with filled heads, rectangles, ellipses, text labels, a pixelation-blur brush for redacting sensitive regions, and an eraser — plus full undo/redo and one-click PNG export. Captures enter through file upload or direct clipboard paste, so a Print-Screen → paste → annotate → export loop takes seconds. Strokes are kept as objects on a layered canvas (base image untouched underneath), which is what makes non-destructive undo/redo and the flatten-on-export model work. The demo ships with a sample photograph as the capture and a scripted annotation set that exercises every tool, so all three gallery views demonstrate real functionality. Everything is one dependency-free HTML file.

1. The user pastes a screenshot from the clipboard or opens an image file; it becomes the base layer of the canvas.
2. Selecting a tool (pen, arrow, shape, text, blur…) and clicking/dragging on the canvas creates a stroke object with color and width.
3. Mouse-move renders a live ghost preview; mouse-up commits the stroke to the stroke list and clears the redo stack.
4. The render loop draws the untouched base image first, then replays every stroke object in order — undo pops the last object, redo restores it.
5. The blur tool captures its drag region, downscales it to 1/8th and draws it back up, producing the pixelation effect.
6. Export composites the base plus all strokes onto an offscreen canvas at full resolution, shows the preview, and offers the PNG download.

Tech stack:

• HTML5 Canvas (layered rendering)
• Vanilla JavaScript (ES6+)
• Clipboard API (image paste)
• FileReader API (image upload)
• Canvas compositing (flatten on export)
• No frameworks, no build tools, no dependencies

• [Nine annotation tools] Pen, highlighter, arrow, rectangle, ellipse, text, pixelation blur, eraser and select — a complete markup toolbelt.
• [Clipboard paste] Paste a screenshot straight from the clipboard; no save-to-file round trip needed.
• [File upload] Open any local image as the annotation canvas.
• [Object-based strokes] Every annotation is stored as an object, enabling true multi-level undo and redo across the session.
• [Pixelation blur] Drag a region to redact it with a downscale-upscale pixelation pass — for passwords, faces and keys in screenshots.
• [Color & width control] Per-stroke color picker and four stroke widths, shown live in the status bar.
• [PNG export dialog] Preview of the flattened result at full capture resolution with one-click download.

• Complete single-file annotation tool source (HTML/CSS/JS)
• Sample capture photograph with scripted annotation demo
• Three screenshot-ready demo views (clean, annotated, export dialog)
• Project report PDF (canvas layering design, stroke model, code walkthrough, limitations)
• PPT presentation for final review
• Viva Q&A preparation document (canvas API, compositing, clipboard security model)
• Setup and usage guide