As part of my intern evaluation by SOLAR LADDER I build this project

Canvas Studio - 2D Canvas Editor

web-based canvas editor built with React, Fabric.js, and Firebase Firestore. Create beautiful designs with shapes, text, and free drawing tools that automatically save to the cloud

The application is built with React, Fabric.js, and Firebase.

Features

• Create New Canvases - Start fresh with a blank canvas

• Shape Tools - Add rectangles, circles, and text objects

• Pen Tool - Freehand drawing with customizable colors and widths

• Object Manipulation - Move, resize, rotate, and delete objects

• Real-time Properties - Edit colors, stroke width, opacity, and more

• Auto-save - Automatic cloud saving with manual override

• Saved Canvases Gallery - View and manage all your created canvases

• Tech Stack

• Frontend: React 18, Fabric.js

• Backend: Firebase Firestore

• Styling: CSS

• Routing: React Router DOM

• Deployment:Firebase Hosting

  Project Architecture

src/ ├── components/ │ ├── home/HomePage.jsx # Landing page with canvas gallery │ └── canvas/ │ ├── CanvasEditor.jsx # Main editor interface │ ├── Toolbar.jsx # Drawing tools panel │ └── PropertiesPanel.jsx # Object properties editor ├── hooks/ │ ├── useCanvas.js # Fabric.js canvas management │ └── useFirestore.js # Firebase data operations ├── services/ │ └── firebase.js # Firebase configuration ├── App.jsx # Main app with routing ├── main.jsx # React entry point └── styles.css # All application styling

How Each Component Works App.jsx - Application Router

 <Router>
  <Route path="/" element={<HomePage />} />
  <Route path="/canvas/:canvasId" element={<CanvasEditor />} />
</Router>
   puropse:Handles navigation between Home page and Canvas Editor

2. HomePage.jsx - Landing Page & Canvas Gallery

• **What it does:
• Displays welcome screen with "Create New Canvas" button
• Shows gallery of all saved canvases
• Handles canvas creation and deletion
• Navigates to editor when canvas is clicked

Key Features:

• Creates new canvas with unique ID using UUID
• Fetches all canvases from Firebase Firestore
• Displays canvas previews with delete functionality
• Responsive grid layout for canvas cards

3. CanvasEditor.jsx - Main Editor Interface

• What it does:
• Main workspace for creating and editing designs
• Manages canvas state and auto-saving
• Coordinates between Toolbar and PropertiesPanel
• Handles URL parameters for canvas ID

Key Features:

• Auto-save functionality with toggle
• Manual save button
• Real-time status updates
• Error handling and loading states

4. Toolbar.jsx - Drawing Tools Panel

• What it does:
• Provides access to all drawing tools
• Shows currently active tool
• Handles tool selection and activation

Available Tools:

• 🖱️ Select Tool - Select and manipulate objects
• ⬜ Rectangle - Add rectangular shapes
• ⭕ Circle - Add circular shapes
• 📝 Text - Add editable text objects
• ✏️ Pen - Freehand drawing tool

5. PropertiesPanel.jsx - Object Properties Editor

• What it does:
• Displays properties of selected objects
• Allows real-time editing of object attributes
• Shows different controls based on object type

Editable Properties:

• Fill color
• Stroke color and width
• Font size (for text)
• Opacity
• Object dimensions and position

Custom Hooks - The Brain

1. useCanvas.js - Canvas Management

• Responsibilities:
• Initialize and manage Fabric.js canvas
• Handle all drawing operations
• Manage object selection and manipulation
• Provide drawing tools functionality

Key Functions:

javascript

// Canvas initialization
const fabricCanvas = new fabric.Canvas(canvasRef.current, {
  width: 800,
  height: 600,
  backgroundColor: '#ffffff'
});

// Tool functions
addRectangle()    // Add rectangle shape
addCircle()       // Add circle shape  
addText()         // Add text object
enableFreeDrawing() // Activate pen tool
deleteSelected()  // Remove selected objects

// Property editing
changeColor()     // Change object fill color
changeStrokeColor() // Change border color
bringToFront()    // Layer management
sendToBack()      // Layer management

2. useFirestore.js - Data Persistence Responsibilities:

Save canvas data to Firebase Firestore

Load canvas data from Firestore

Handle real-time updates

Manage loading and error states

Key Functions:

saveCanvas(data)    // Save canvas to cloud
loadCanvas()        // Load canvas from cloud

Fabric.js Integration

• How Drawing Works:
• Canvas Initialization: Fabric.js creates a HTML5 canvas with enhanced features
• Object Creation: Each shape/text is a Fabric.js object with properties
• Event Handling: Fabric.js handles mouse events for drawing and manipulation
• Serialization: Canvas state converted to JSON for saving

Object Manipulation:

• Move: Click and drag objects
• Resize: Drag corner handles
• Rotate: Drag rotation handle
• Edit: Double-click text to edit content

💾 Data Flow & Saving

Auto-Save Process:
text
User Action → Canvas Change → Fabric.js Event → useCanvas → useFirestore → Firebase
     ↓              ↓              ↓             ↓            ↓           ↓
  Draw shape    Object added   object:added   exportJSON()  saveCanvas() Cloud save

Live demo link:https://drive.google.com/file/d/1BEWlpHO5wtADfxfywPwE0X5CVRPKdmJf/view?usp=sharing