Socket.io whiteboard

🎨 HTML5 canvas real-time drawing using socket.io

Table of Contents

• What is this?
• Installation
• Demo
• Documentation
• Dependencies
• License

🖌 What is this?

This is a simplified version of the JavaScript code I use for a sketch guessing multiplayer game ~~I'm working on~~ I used to work on. Keep in mind that it's ~~still under development as I'm experimenting with different ways to build this. Still, this could be a nice start for similar projects~~ a very bare-bones version, which is only useful as a starting point for your own projects.

📦 Installation

1. Include Socket.io in your client-side code

   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
           integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I="
           crossorigin="anonymous"></script>
   

2. Include this library in your client-side code

   <script src="https://cdn.jsdelivr.net/gh/over-engineer/[email protected]/lib/whiteboard.js"
           integrity="sha384-RceltRoqS8zq7xl4btt0biBpy99d2+11CCTBAmBgfTkXshR6iIr5Lap4tXBA/lnh"
           crossorigin="anonymous"></script>
   

3. Create a Whiteboard instance using new Whiteboard(), passing your canvas, your socket and optionally a default color and thickness.

   For example:

   const canvas = document.querySelector('canvas');
   const whiteboard = new Whiteboard(canvas, socket);
   

4. For the server-side, check the /demo/backend directory

🎉 Demo

Check out the demo (open the console!)

You can also:

…or do it yourself:

1. Make sure you have Node.js installed.

2. Clone this repository

   $ git clone [email protected]:over-engineer/Socket.io-whiteboard.git
   $ cd ./Socket.io-whiteboard
   

3. Install the dependencies

   $ npm install
   

4. Start the server

   $ npm start
   

5. Go to localhost:3000

📚 Documentation

The demo has the bare minimum functionality to keep it as simple as possible.

In a real-world scenario you would have to customize the color, the thickness of the line, download drawings etc

These are the public methods you'll find in the /lib/whiteboard.js file:

In the above table whiteboard is an instance of Whiteboard

🗄 Dependencies

• Node.js
• socket.io

📖 License

The MIT License, check the LICENSE file.