🎨 Canvas - Collaborative Drawing App

A real-time collaborative whiteboard where multiple people can draw together, just like sharing a notebook.

What is it?

Canvas lets you:

• ✏️ Draw together - Multiple users draw on the same canvas in real-time
• 👥 See who's online - View active participants in each room
• 🔒 Control access - Lock rooms or allow guest editing
• 📝 Add text - Place and move text annotations anywhere
• 🎯 Select & move - Use rectangle or lasso tools to select and move drawings
• 💬 Interact - Like rooms and leave comments

How it works

┌─────────────┐
│   User 1    │──┐
└─────────────┘  │
                 ├──► Firebase ──► Real-time sync
┌─────────────┐  │
│   User 2    │──┘
└─────────────┘

1. Create or join a room - Start a new canvas or join an existing one
2. Draw together - Everything you draw appears instantly for others
3. Collaborate - See avatars of active users

Features

🖊️ Drawing Tools

• Pen - Smooth drawing with adjustable brush size
• Highlighter - Semi-transparent strokes
• Eraser - Remove parts of drawings
• Selection - Rectangle or lasso tool to select and move/delete strokes

📝 Text

• Double-tap anywhere to add text
• Drag text to move it around
• Long-press to delete

👥 Collaboration

• Presence - See who's currently in the room
• Permissions - Room owners can lock rooms or disable guest editing
• Real-time sync - All changes sync instantly via Firebase

Tech Stack

• Flutter - Cross-platform mobile framework
• Firebase - Real-time database and authentication
  • Firebase Realtime Database - For live collaboration
  • Firebase Auth - For user sign-in (Google & Anonymous)

Getting Started

1. Prerequisites

   flutter --version  # Requires Flutter SDK

2. Setup Firebase

   • Add your google-services.json (Android) and GoogleService-Info.plist (iOS)
   • Configure Firebase project with Realtime Database

3. Run the app

   cd Canvas
   flutter pub get
   flutter run

4. Sign in

   • Use Google Sign-In or continue as Guest
   • Create a new room or join an existing one
   • Start drawing!

Project Structure

lib/
├── main.dart              # App entry, room list screen
├── DrawingCanvas.dart     # Main canvas with drawing & collaboration
├── auth_service.dart      # Firebase authentication
├── models/
│   ├── room.dart         # Room data model
│   └── user_profile.dart # User profile model
└── screens/
    ├── user_profile_screen.dart
    └── edit_profile_screen.dart

Key Concepts

• Rooms - Separate drawing canvases that users can join
• Strokes - Individual drawing lines stored in Firebase
• Participants - Active users tracked in real-time
• Permissions - isLocked and allowGuestEdit control room access

---

Made with ❤️ using Flutter & Firebase