Draw Network

Introduction

This project started around the 31st of January 2015. The reason this project started was because a couple of days earlier a couple of friends and myself needed to explain something with a drawing. So we found a multi-person drawing tool so we could all see the drawing, this tool was FlockDraw. There was one issue with this application, it didn't have a colour dropper that let you select a colour you had previously used on the canvas. It was near impossible to get the exact same colour you had used previously by using the colour palette (image below). I didn't think it would be too hard to implement this tool so I got to work on what is now called Draw Network.


Development

The first part was to choose a framework to create the application in. I already knew it was going to be web based so it was going to involve some form of Javascript and HTML. I always wanted to do a project in Node.js so this is what was chosen. I then looked into a Node.js networking module that had a simple API and would get the job done. At this stage I didn't bother looking for the most performant networking module. The module chosen was Socket.IO.

To get started I created a basic chat application that would send text to the server and then push it out to all the clients. This was very simple and easy to create. From here I added a canvas and a basic circle brush to the client. Then I started sending this data to the server and then back out to all the clients. This worked great and I was satisfied with it.

Fast track forward around a month of development these were the implemented features:


Conclusion

In conclusion I am very happy with how this project turned out. Its probably one of the most feature rich projects I have worked on to date. The live and most up to date version of Draw Network can be found here. The project is under an open source license and is available on github.