Screen Drawing & Screenshot App

Overview

An Electron app that enables direct drawing on the screen and simultaneous screenshot capture. Perfect for quickly adding visual annotations during presentations or when creating explanatory materials.

Main Features

1. Drawing Features

• Shortcut Key Activation: Launch instantly with configurable global hotkeys
• Transparent Overlay: Display a transparent layer over existing screens
• Drawing Tools:
  • Pen tool (freehand drawing)
  • Shape tools (arrows, rectangles, circles, etc.)
  • Text tool
  • Eraser tool
• Color Palette: Rich color selection with opacity adjustment
• Line Width Adjustment: From fine annotations to prominent markings

2. Screenshot Features

• Area Selection Capture: Specify capture area with mouse drag
• Full Screen Capture: Capture entire screen with one click
• Window Capture: Capture specific windows only
• Save with Drawings: Save screenshots with annotations included

3. Convenient Features

• Shortcut Key Settings: Customizable shortcuts for all functions
• History Management: Undo/redo functionality
• Save Format Options: Support for PNG/JPEG/WebP formats
• Clipboard Integration: Automatic copy to clipboard after capture
• Floating Toolbar: Always-visible compact toolbar

Tech Stack

• Electron: Desktop application framework
• Node.js: Backend logic
• HTML5 Canvas: Drawing functionality implementation
• electron-screenshot: Screenshot functionality
• global-shortcut: Global shortcut management

Use Cases

1. Presentations

   • Add annotations directly on slides
   • Highlight important points

2. Tutorial Creation

   • Visually explain operation procedures
   • Add explanations to screenshots

3. Bug Reports

   • Mark problem areas directly
   • Visually record reproduction steps

4. Design Reviews

   • Point out UI/UX improvements directly
   • Present layout modification proposals

Development Plan

1. Phase 1: Basic Feature Implementation

   • Build basic Electron application structure
   • Implement transparent overlay
   • Basic drawing functionality

2. Phase 2: Screenshot Functionality

   • Area selection, full screen, window capture
   • Integration with drawing
   • Save functionality

3. Phase 3: UI/UX Improvements

   • Toolbar design
   • Shortcut key settings screen
   • Settings persistence

4. Phase 4: Advanced Features

   • Shape recognition (convert hand-drawn circles to perfect circles)
   • Layer management
   • Drawing animation recording

Differentiation from Similar Apps

• Lightweight: Focus on essential features for fast startup
• Shortcut-focused: All operations possible with keyboard only
• Simple UI: Intuitive with low learning curve
• Privacy-focused: Offline-complete, no external data transmission