A modern, feature-rich digital whiteboard designed specifically for mathematical education and drawing.
- Free Drawing: Natural pen/pencil drawing experience
- Geometric Shapes: Lines, rectangles, and circles with real-time preview
- Color Palette: 10 colors + custom picker
- Brush Size Control: Adjustable thickness (1-20px)
- Grid Overlay: Toggle-able for precise drawings
- Responsive Design: Desktop, tablet, and mobile
- Dark Mode: Automatic system preference detection
- Keyboard Navigation: Full keyboard shortcuts
- Touch Optimized: Mobile gesture support
- Undo/Redo: 50-step history
- Save: Export PNG with timestamps
- Keyboard Shortcuts
- Real-time Preview: See shapes before committing
- Performance Optimized: Smooth on lower-end devices
Open index.html in any modern web browser. No build process required.
For live development:
python3 -m http.server 8000
npx serve .
# or
php -S localhost:8000| Key | Action |
|---|---|
| D | Draw mode |
| L | Line tool |
| R | Rectangle tool |
| C | Circle tool |
| G | Toggle grid |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| Ctrl+S | Save as PNG |
| Ctrl+C | Clear canvas |
Built with:
- p5.js v2.2.3 (loaded via CDN)
- Modern JavaScript (ES6+)
- CSS Grid & Flexbox
- Semantic HTML5, ARIA accessibility
Browser Support: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Architecture:
index.html- UI structure and stylingsketch.js- Main application logic (MathBoard class)p5.js- Graphics library loaded via CDN