Live Canvas - Collaborative Drawing Web App

A real-time, multi-user collaborative drawing web application, similar to Microsoft Paint, built with vanilla JavaScript. This project allows multiple users to draw on the same canvas simultaneously, with changes reflected in real time for all participants.

Project History

This application was originally developed in June 2024 as an educational project for the "Wprowadzenie do aplikacji WWW" (Introduction to Web Applications) course at Białystok University of Technology (Politechnika Białostocka).

• Initial Team (June 2024):
  • Kiryl Alishkevich
  • Radzivon Daroshka

Features

• Real-Time Collaboration: Multiple users can join a project and draw on the same canvas, seeing each other's changes live.
• Project Management:
  • Create new drawing projects.
  • Protect projects with a password.
  • Browse and search for existing projects.
• Comprehensive Drawing Tools:
  • Shapes: Rectangle, Circle, Ellipse, Triangle, Rhombus.
  • Freehand: Brush, Line, Arrow.
  • Utility: Eraser, Text tool.
  • Fill Option: Toggle between drawing filled shapes or just outlines.
• Object & Layer Manipulation:
  • Each new drawing action creates a new layer.
  • Move, Resize, and Rotate individual objects/layers.
  • Delete specific objects/layers.
• Customization:
  • Adjustable brush/line thickness.
  • Customizable text size.
  • A palette of pre-set colors and a full-spectrum color picker.
• Canvas Control:
  • Dynamically resize the canvas width and height.
  • Clear the entire canvas.
  • Import images onto the canvas via file selection or drag-and-drop.
  • Save the final drawing as a JPG image.

Technologies Used

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6 Modules)
• Backend Simulation (for local development): json-server to provide a REST API for project data persistence.
• Development Tools: Visual Studio Code with Live Server extension.

Local Setup and Installation

To run this project on your local machine, please follow these steps.

Prerequisites

• Node.js and npm (Node Package Manager) installed on your system.
• A modern web browser (e.g., Chrome, Firefox).
• Visual Studio Code (recommended) with the Live Server extension.

Installation Steps

1. Clone the repository (or download the source code):

   git clone <repository-url>
   cd <repository-directory>

2. Install json-server: If you don't have json-server installed globally, run this command in your terminal:

   npm install -g json-server

3. Start the Backend Server: Navigate to the db directory and start the JSON server. It will watch the db.json file for changes.

   cd db
   json-server --watch db.json

   The server will typically start on http://localhost:3000. Keep this terminal window open.

4. Launch the Frontend Application:

   • Open the project folder in Visual Studio Code.
   • Right-click on the index.html file.
   • Select "Open with Live Server".
   • This will open the application in your default web browser, connected to your local backend server.

You can now create new projects, draw, and see the data being updated in your db/db.json file.

Contributing

This was primarily an educational project, but contributions or suggestions for improvement are welcome. Please feel free to open an issue to discuss your ideas or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.