A modern, feature-rich whiteboard application built with React and CSS (Tailwind). Perfect for sketching, note-taking, presentations, and digital art creation.
- 👋 Hand Tool - Pan and navigate the canvas freely
- ✔️ Choice Tool - Select and manipulate objects
- 🖊️ Pen Tool - Solid, precise lines for detailed work
- ✏️ Pencil Tool - Softer, semi-transparent strokes
- 🖍️ Highlighter - Thick, translucent lines for emphasis
- 🧽 Eraser - Remove content with adjustable size
- 📏 Line Tool - Draw straight lines with precision
- ➡️ Arrow Tool - Create directional arrows for diagrams
- ⬛ Rectangle Tool - Draw perfect squares/rectangles
- ⭕ Circle Tool - Create ellipses or perfect circles
- 🔤 Text Tool - Add customizable text labels
- 🧽 Eraser - Remove content with adjustable size
- 🎨 Color Palette - 7 preset colors plus custom color picker
- 📏 Brush Size Control - Adjustable from 1px to 50px
- 🌗 Theme Modes - White board and dark board options
- 💾 History Management - Full undo/redo functionality
- 📱 Responsive Design - Works on desktop, tablet, and mobile
- 🎯 Floating Controls - Intuitive, non-intrusive interface
- 🎮 Touch Support - Native touch drawing for mobile devices
- Download the HTML file
- Open in any modern web browser
- Start drawing immediately!
# Clone or download the file
git clone https://github.com/fiqryx/draw-board.git
# and
npm install
# then
npm run dev- Select a Tool - Click on pen, pencil, highlighter, or eraser
- Choose a Color - Click any color from the palette or use custom picker
- Adjust Size - Use the slider to set brush thickness
- Start Drawing - Click and drag on the canvas
Ctrl/Cmd + Z- Undo (planned feature)Ctrl/Cmd + Y- Redo (planned feature)Ctrl/Cmd + A- Clear canvas (planned feature)
- Pen: Solid, opaque lines - perfect for writing and precise drawing
- Pencil: 70% opacity with reduced width - ideal for sketching
- Highlighter: 2x width with 30% opacity - great for emphasis
- Eraser: 2x width with destination-out blend mode - removes content
- ✅ Chrome 88+
- ✅ Firefox 85+
- ✅ Safari 14+
- ✅ Edge 88+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- Efficient canvas rendering
- Optimized touch event handling
- Minimal memory footprint
The whiteboard is fully optimized for mobile devices:
- Touch-friendly interface with larger buttons
- Responsive floating panels
- Native touch drawing support
- Automatic canvas scaling
- Education: Digital blackboard for online teaching
- Presentations: Live sketching during meetings
- Art & Design: Digital sketching and ideation
- Note-taking: Visual note-taking and mind mapping
- Collaboration: Shared whiteboard sessions (with backend)
Contributions are welcome! Here's how to get started:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing code style
- Test on multiple browsers
- Ensure mobile compatibility
- Add comments for complex logic
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed description
- Include browser version and steps to reproduce
Happy Drawing! 🎨

