This is the standalone backend render service for Canvasmatic. It uses Fabric.js and node-canvas to generate images from JSON templates and uploads them to Firebase Storage.

• Express.js API for rendering images
• Fabric.js and node-canvas for server-side rendering
• Firebase Storage integration
• Health check endpoint

• Build and run with Docker
• Deployable to Google Cloud Run or other container platforms

1. Install dependencies: npm install
2. Build: npm run build
3. Start: npm start

• POST /render — Render an image from a Fabric.js JSON template
• GET /health — Health check

For deployment and configuration, see the Dockerfile and environment variable documentation.

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Main App      │    │  Render Service  │    │   Firebase      │
│  (App Hosting)  │◄──►│  (Cloud Run)     │◄──►│   Storage       │
│                 │    │                  │    │                 │
│ - UI            │    │ - Image Gen      │    │ - Templates     │
│ - Auth          │    │ - Heavy Compute  │    │ - Images        │
│ - Templates     │    │ - Scalable       │    │ - Logs          │
└─────────────────┘    └──────────────────┘    └─────────────────┘

Renders a Fabric.js canvas to an image.

Request Body:

{
  "fabricData": {
    "objects": [...],
    "background": "#ffffff"
  },
  "width": 800,
  "height": 600,
  "format": "png",
  "quality": 0.9,
  "transparent": false
}

Response:

{
  "success": true,
  "imageUrl": "https://storage.googleapis.com/...",
  "filename": "render_1234567890.png"
}

Health check endpoint.

Response:

{
  "status": "healthy",
  "service": "canvasmatic-render-service",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "version": "1.0.0"
}

• Node.js 18+
• Docker (optional)
• Firebase project setup

1. Install dependencies:

   npm install

2. Create environment file:

   cp env.example .env
   # Edit .env with your Firebase configuration

3. Run in development mode:

   npm run dev

4. Build for production:

   npm run build
   npm start

# Build image
npm run docker:build

# Run container
npm run docker:run

The service automatically deploys to Google Cloud Run when changes are pushed to the main branch.

1. Set up Google Cloud:

   gcloud auth login
   gcloud config set project canvascraft-us3rv

2. Create secret for Firebase private key:

   echo "YOUR_PRIVATE_KEY" | gcloud secrets create RENDER_SERVICE_FIREBASE_ADMIN_PRIVATE_KEY --data-file=-

3. Deploy using script:

   ./scripts/deploy.sh

• Endpoint: GET /health
• Expected: 200 OK with service status

View logs in Google Cloud Console:

gcloud logging read "resource.type=cloud_run_revision AND resource.labels.service_name=canvasmatic-render-service"

Monitor in Google Cloud Console:

• Request count
• Response time
• Error rate
• Memory usage
• CPU usage

1. Canvas rendering fails:

   • Check if all required system dependencies are installed
   • Verify Fabric.js data format
   • Check memory limits

2. Firebase connection fails:

   • Verify service account credentials
   • Check project ID and permissions
   • Ensure secret is properly configured

3. Docker build fails:

   • Check if all system dependencies are in Dockerfile
   • Verify Node.js version compatibility

Set NODE_ENV=development to get detailed error messages.

1. Make changes in the render-service directory
2. Test locally with npm run dev
3. Push to trigger automatic deployment
4. Monitor deployment in GitHub Actions

Part of the Canvasmatic project.