Creating a community drawing board with Paper.js and Rails

After spending 3 days researching how to integrate ActionCable with Paper.js, my project partner and I finally managed to create a real-time collaborative drawing board! We setup our backend according to an article written by a friend who also used ActionCable to create a real-time chat-app, which can be found here. If you want to follow along, I recommend following along with the linked article until Step 3, where we really start to diverge away from their setup process.

Note: Instead of sending messages, we will be sending circles. In our program, we created a paint brush that creates geometric circles on mouse drag, so if you’re confused about the nomenclature of our program, it’s because we are sending data about each circle to the backend, which will then be sent back to other subscribers in the room to recreate the original canvas. See below for alterations in our code to properly send circles instead of messages.

Other note: Our code snippets also assume that you have already set up Paper.js on your program

We are sending info about each coordinate (their x & y), strokeWidth (radius of the circle), and the strokeColor. strokeWidth and strokeColor are keys used by Paper.js so we kept the variable names consistent.

Under app > channels, in the backend, we set up a CirclesChannel instead of a ChatMessagesChannel.

Instead of sending data about messages to subscribers, here we are sending information about each circle to be sent to other subscriptions.

On the frontend, we have to open up a WebSocket so the front and the backends can communicate.

The previous article perfectly explains what’s going on in the above code, so no need to repeat the explanation here. (Programmers are lazy, remember?)

Next, we need some functions to send over data to our backend:

We will be sending information about where we are dragging the mouse along with the information about our current brush (it’s thickness and color)

Lastly, we need to write a function that will receive that data and print it on the canvas to other subscribers:

Whenever our WebSocket receives a message from the backend, we then parse that message into JSON and recreate each circle that was added to the canvas.

Add everything together and voila!

A side-by-side comparison of two windows open.

There are definitely better and more memory-efficient ways of creating a similar app, but for now, this is what we’ve come up with. We are also looking to progress this idea into creating a Pictionary app that recognizes different users, and implements a chat system. The front-end can also use a bit of touching up, but after 3 days of frustrating research and trial-and-error, it’s rewarding to see one aspect of our project to finally work.