Public Canvas

An anonymous, real-time collaborative platform to share anything.

Overview

Public Canvas is a high-performance, anonymous drawing tool designed for seamless sharing. It features an infinite workspace, multiple public boards, and a premium, minimal aesthetic powered by the Roboto font.

Key Features

• Infinite Workspace: Pan and zoom across an effectively unlimited drawing area.
• Real-Time Collaboration: See strokes and fills from other users instantly.
• Multiple Public Boards: Create and join different canvases anonymously.
• Snapshot Loading: Boards load their entire history at once for a smooth initial experience.
• Minimal UI: A clean, distraction-free interface with a focus on typography and white space.
• Essential Tools: Pencil, Eraser, Hand (Panning), and a curated Color Palette.
• Responsive Design: Works across different screen sizes and high-DPI displays.

Tech Stack

• Backend: Ruby on Rails 8.1
• Real-Time: ActionCable (WebSockets)
• Frontend: Hotwire (Stimulus + Turbo)
• Styling: TailwindCSS
• Database: SQLite3

Getting Started

Prerequisites

• Ruby 3.4.8 (managed via mise or rvm)
• Rails 8.1
• SQLite3

Installation

1. Clone the repository:

   git clone <repository-url>
   cd s

2. Install dependencies:

   bundle install

3. Setup the database:

   rails db:migrate
   rails db:seed

4. Start the development server:

   ./bin/dev

   The application will be available at http://localhost:3000.

Running with Docker

If you prefer to use Docker, you can spin up the entire environment with a single command:

1. Ensure you have a Master Key: Create config/master.key or set the RAILS_MASTER_KEY environment variable.

2. Build and Start:

   docker-compose up --build

   The app will be available at http://localhost:3000. The SQLite database is persisted in the ./storage directory on your host.

How Collaboration Works

The real-time magic of Public Canvas is powered by the integration of ActionCable and Stimulus.

1. ActionCable (The Pipeline)

When a user joins a board, they subscribe to a specific WhiteboardChannel identified by the board's unique slug. This creates a persistent WebSocket connection between the client and the server.

• Broadcasting: When a user draws a stroke or performs an action, the data is sent to the server, persisted in the database, and then broadcasted to all other users subscribed to that specific board's channel.
• Snapshots: To prevent "ghost drawing" (where lines appear one by one on load), the server sends a single snapshot message containing the entire board history immediately upon subscription.

2. Stimulus (The Orchestrator)

The whiteboard_controller.js manages the local canvas state and coordinates with ActionCable.

• Local Rendering: Strokes are rendered locally for the drawing user immediately for zero-latency feedback.
• Remote Rendering: When the controller receives a draw event from the WebSocket, it translates those coordinates into the user's current view (accounting for their specific pan/zoom level) and renders them on the fly.
• Coordinate Mapping: The system uses a World Coordinate System. Screen coordinates are mapped to world coordinates before being sent to the server, ensuring that users at different zoom levels or on different screen sizes see the drawings in the same relative positions.

License

This project is open-source and available under the MIT License.