socketio-whiteboard

by over-engineer

GitHub Readme.md

Socket.io whiteboard

GitHub GitHub last commit Demo

🎨 HTML5 canvas real-time drawing using socket.io

Table of Contents

πŸ–Œ What is this?

This is a simplified version of the JavaScript code I use for a sketch guessing multiplayer game I'm working 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.

πŸ“¦ 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/Socket.io-whiteboard/lib/latest/whiteboard.js" 
            integrity="sha384-0SpYdGaHioGkmKzEXMXv+KuDDa9JxaQKrUyAnfocU3GxV8206NHFkT6qlRZh/Kpk" 
            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:

Deploy

…or do it yourself:

  1. Make sure you have Node.js installed.

  2. Clone this repository

    $ git clone git@github.com: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:

Method Explanation whiteboard.color = newValue Sets the line color to the given value whiteboard.color Returns the current color of the line whiteboard.thickness = newValue Sets the line thickness to the given value whiteboard.thickness Returns the current thickness of the line whiteboard.increaseThickness(step) Increases the thickness of the line by the given step whiteboard.decreaseThickness(step) Decreases the thickness of the line by the given step whiteboard.download(filename) Exports the canvas drawing as an image file and saves it with the given name

In the above table whiteboard is an instance of Whiteboard

πŸ—„ Dependencies

πŸ“– License

The MIT License, check the LICENSE file.