Skip to content

A little real-time online collaborative drawing program

License

Notifications You must be signed in to change notification settings

martendo/web-draw

Repository files navigation

Web Draw Pen Logo

Version Website

A little real-time online collaborative drawing program. https://w-draw.web.app

Web Draw is a web app that allows users to draw on a shared canvas in real time. It's currently a little rough, but is seeing some improvement here and there.

How does it work?

Web Draw uses sessions, which connect users together. All users in a session work on the same canvas.

Each session has a unique session ID, which can be set to anything. A random 4-character session ID is generated if one is not provided. A session's ID can be changed at any time so long as the new ID isn't already taken.

Sessions can also optionally have a password set on them, so that only users who are able to provide the password can join. A session's password can be changed or removed at any time.

Currently available tools

  • pen Pen Tool
  • eraser Eraser Tool
  • flood-fill Flood Fill Tool
  • colour-picker Colour Picker Tool
  • select Rectangular Select Tool
  • line Line Tool
  • rect Rectangle Tool
  • ellipse Ellipse Tool

How does it really work?

Web Draw uses WebSockets for the "Web" part, and the web Canvas API for the "Draw" part.

The WebSockets server uses the ws module for Node.js and speaks MessagePack with its clients using msgpack-lite. When a user performs an action, the server is told about it, and if necessary, then tells all other session members about it.