Annotation Tools

BugPin includes a full-featured annotation editor for marking up screenshots before submitting bug reports.

Available Tools

Select Tool

The default tool for selecting and manipulating existing annotations.

• Click an annotation to select it
• Drag to move selected annotations
• Resize using corner handles
• Delete selected annotations with the Delete key or toolbar button

Pen Tool

Freehand drawing for highlighting or circling issues.

• Click and drag to draw
• Adjust stroke width in the toolbar
• Choose from available colors

Arrow Tool

Point directly to the issue with arrows.

• Click to set the starting point
• Drag to set the direction and length
• Arrows are great for directing attention to specific UI elements

Rectangle Tool

Draw rectangular shapes to highlight areas.

• Click and drag to create a rectangle
• Useful for highlighting sections of the UI
• Rectangles are drawn with a stroke (no fill) so underlying content remains visible

Circle Tool

Draw elliptical shapes for highlighting.

• Click and drag to create a circle/ellipse
• Like rectangles, circles are drawn with stroke only
• Good for highlighting buttons, icons, or other circular elements

Text Tool

Add text annotations directly on the screenshot.

• Click to place a text box
• Type your annotation
• Click outside to finish editing
• Select and edit existing text annotations anytime

Blur/Mask Tool

Hide sensitive information before submitting.

• Click and drag to create a blur region
• Covers the area with a solid mask
• Use this to hide personal data, passwords, or other sensitive content

Toolbar Controls

Color Picker

Select from predefined colors for your annotations:

• Red (default)
• Orange
• Yellow
• Green
• Blue
• Purple

Stroke Width

Adjust the thickness of lines for pen, shapes, and arrows:

• Thin (2px)
• Medium (4px)
• Thick (6px)

Undo/Redo

• Undo: Revert the last action
• Redo: Restore an undone action
• Supports full history of changes

Delete

Remove the currently selected annotation.

Clear All

Remove all annotations from the screenshot to start over.

Keyboard Shortcuts

Shortcut	Action
Delete / Backspace	Delete selected annotation
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Escape	Deselect / Cancel

Tips for Effective Annotations

Be Specific

Use arrows and text to point out exactly what's wrong. Instead of circling a large area, point to the specific element.

Provide Context

If the bug involves multiple elements, number your annotations (using text) to show the sequence of actions.

Hide Sensitive Data

Always use the blur tool to mask:

• Personal information
• Email addresses
• Passwords (even if masked in the UI)
• API keys or tokens visible on screen
• Any confidential business data

Keep It Simple

Don't over-annotate. A single well-placed arrow with a brief text note is often more effective than many annotations.

Workflow

1. Capture Screenshot: Click the widget button to capture the current screen
2. Review: The screenshot appears in the annotation editor
3. Annotate: Use the tools to highlight and explain the issue
4. Describe: Add a title and description in the form
5. Submit: Send the annotated report

Technical Details

The annotation editor is built with Fabric.js, providing:

• Smooth canvas rendering
• Touch support for mobile devices
• High-quality export to PNG
• Consistent behavior across browsers

Annotations are rendered onto the screenshot before submission, so the final image includes all your markups.