drawonline.xyz

• 

  Our logo

Inspiration

We were inspired by our little cousins wanting to draw with their friends, but being unable to due to COVID-19 restrictions. Drawonline was made for interaction and real-time collaboration. It emphasizes socializing via a central chat. It is great for education, especially for children.

What it does

Drawonline allows people to join into drawing rooms with people around the world. It features a chat and a canvas with built-in tools. The canvas is synced with all the members of the room, and users can see changes in real-time. The users can download the canvas after they are done with their masterpiece.

How we built it

We used a vast array of technologies. For the frontend, we used a combination of Chakra-UI, React-Konva, and React to create an immersive and interactive frontend. As for the backend, we useda node.js environment paired with ws, the fastest library for websockets, along with http and express.js. The users, chat, and the canvas states are all stored in fast memory to allow for continuous reads and writes.

Challenges we ran into

Since we wanted to build a real-time application, many websocket libraries were too slow to give optimum performance. Therefore, we made our own implementation using the ws library. We also ran into challenges when trying to sync the chat and the canvas, but after some debugging, we were able to get near-perfect syncing across all connected clients.

Accomplishments that we're proud of

We are proud that we were able to work in different time zones and work together to write and debug a real-time, canvas-based website. These technologies are notorious for their huge amounts of edge-cases that they present, and we were able to make them work together.

What we learned

We learned a lot about websockets, the HTML5 canvas API, React, Chakra UI, and other supporting libraries. We also learned how to sync multiple clients together using the fast memory of the server. Overall, it was a very valuable 24 hours.

What's next for drawonline.xyz

After the hackathon, we plan on adding features for scalability such as Redis for data management, and writing our own canvas implementation that uses SVG to allow for broader tool sets as well as give artists the ability to create very complex pieces together without dropping sync or running out of memory.

Built With

• canvas
• chakra-ui
• express.js
• http
• javascript
• jsx
• node.js
• react
• react-konva
• realtime
• websockets
• ws