Screenshot & Annotate

What Screenshot & Annotate helps you do

Take a screenshot of your screen, a window, or a browser tab and mark it up before you share it. Draw freehand notes, add boxes and arrows to point at details, and drop text labels, then download a PNG. Capture and annotation stay in your browser, so a screenshot of an internal dashboard never leaves your machine.

Screenshots are captured and annotated entirely in your browser. Images are never uploaded to Haivix servers; the annotated PNG is created and downloaded on your device.

How it works

The browser's Screen Capture API provides a single frame from the surface you choose. The frame is drawn to a canvas, where the annotation tools add shapes and text as separate drawing operations. The canvas is exported as a PNG, so the marks are part of the downloaded image and cannot be edited later.

How to use Screenshot & Annotate

1. Select Capture screen and choose the screen, window, or tab to capture in the browser picker.
2. Pick a tool, color, and size, then draw boxes, arrows, pen strokes, or text on the frame.
3. Undo or clear marks as needed, then download the annotated PNG.
4. Capture again if you need a different frame or a clean version.

When to use it

• Highlight the exact button, error, or field in a screenshot for a bug report.
• Annotate a design, dashboard, or document before sending feedback.
• Point out a step in a support reply without installing a screenshot editor.
• Mark a layout issue for a developer or designer.
• Call out a field in a form or a row in a data table.
• Create a quick visual instruction for a colleague.

When not to use it

• Do not use it to capture video or an animation; it takes one frame.
• Do not include private data unless the recipient is allowed to see it.
• Do not expect the annotations to remain editable after download.

Example

A user reports that a save button does nothing. The tab is captured, a red box marks the button, an arrow points to the disabled state, and a text label says 'stays disabled after upload'. The PNG is attached to the ticket, and the developer can see the exact state without asking for a screen share.

What you can do with Screenshot & Annotate

• Capture the full screen, a single window, or a browser tab.
• Draw boxes, arrows, freehand pen strokes and text labels.
• Choose the annotation color and stroke size.
• Undo or clear marks before exporting.
• Download the annotated result as a PNG.
• Keep the screenshot and edits local to the browser.

Example: annotate a bug report screenshot

Capture the tab that shows the error, then draw a box around the broken control and an arrow from the error message. Add a short text label naming the step that triggered it.

Check that the annotation does not cover the evidence, then download the PNG and attach it to the ticket. The original screenshot stays available if you need to re-annotate a different detail.

What to know before you start

• Screen capture needs a desktop browser with the Screen Capture API.
• Annotations are drawn on a single frame; this tool does not capture video.
• The PNG is a raster image, so annotations cannot be edited after download.
• There is no OCR or text extraction from the captured frame.
• Very large screens can produce a large PNG compared with a cropped screenshot.

Common mistakes

• Drawing over the error message so the evidence is hidden.
• Capturing the whole desktop when a single tab is enough.
• Using a thin stroke or a low-contrast color that disappears in the ticket.
• Forgetting to download before closing the capture tab.
• Assuming the PNG can be edited later; annotations are baked in.

Troubleshooting

If the preview is black, the shared surface may be protected or the picker selection may have changed. Capture again and choose a different surface.

If the screenshot is blurry, the display scaling may be different from the captured surface. Capture the window or tab directly instead of the whole desktop.

If a text label is hard to read, increase the size or switch to a contrasting color.

If the download is missing, check that the capture completed and that the browser did not block the file. Try again with a smaller surface.

If the captured image is the wrong screen, the browser picker may have kept an earlier selection. Start a new capture and choose the surface explicitly.

Related standards and documentation

• The Screen Capture API defines the browser surface picker used for the frame.
• PNG is specified by ISO/IEC 15948 and preserves the annotated pixels losslessly.