The Whiteboard App is a web application that allows users to draw and add text on a virtual whiteboard. It supports features such as changing brush size, changing colors, clearing the whiteboard, and toggling a text mode for adding text to the canvas.
- Drawing Lines: Users can draw lines on the canvas by clicking and dragging the mouse.
- Brush Size: Users can change the size of the brush by adjusting a range input.
- Color Selection: Users can select different colors for drawing lines or adding text.
- Clearing the Whiteboard: Users can clear the entire canvas with a single click.
- Text Mode: Users can toggle a text mode that allows them to add text to the canvas by clicking on it.
- HTML5: Provides the structure and layout of the web application.
- CSS: Used for styling the elements and user interface.
- JavaScript: Implements the functionality of the Whiteboard App.
- Socket.IO: Enables real-time communication between the client and server for collaborative drawing.
- Express.js: A minimal and flexible web application framework for handling server-side logic.
- Clone the repository:
git clone https://github.com/your-username/whiteboard-app.git - Navigate to the project directory:
cd whiteboard-main - Install the dependencies:
npm install - Start the server:
npm run start - Open your web browser and visit
http://localhost:8080to access the Whiteboard App.
- Drawing Lines: Click and drag the mouse on the canvas to draw lines.
- Brush Size: Adjust the brush size by moving the range input slider.
- Color Selection: Click on the color fields or use the color picker to select a color.
- Clearing the Whiteboard: Click the "Clear" button to clear the entire canvas.
- Text Mode: Click the "Text" button to enter text mode. Click on the canvas to add text.
Contributions are welcome! If you find any issues or want to add new features, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for more information.