At first, I just wanted to write a simple drawing board. Later, I unconsciously remembered that graphite documents have a whiteboard function, so I wanted to develop the current canvas function into a simplified version of the collaborative drawing board.
Online demo: Currently in the process of deployment, it needs to be cloned to run locally.
git address
2. Run
git clone <repository>npm install#>>>>For the development stage: #Front-end service startup (using webpack dev server): npm run dev#Backend service startup (nodemon is used to monitor back-end file modifications in real time and restart the service) npm run start# >>>For the production stage: #Package the front-end files, and then start the server 1. npm run build2. npm run start
3. Function:
Development completed:
•Canvas zoom (Done)
•Canvas color (Done)
•Brush Color (Done)
•Brush thickness (Done)
•History (undo, restore) (Done)
•Chat room(Done)
• Draw collaboration (similar to graphite document collaboration) (Done)
Features to be developed:•UI interface beautification (to be developed) •Planning to use UI library (material design)
•Text control (to be developed)
•Upload pictures and draw based on pictures (to be developed)
•The basic shape of the drawing can be dragged to adjust the size (to be developed)
• Rich chat functions (expressions, pictures, audio and video) (to be developed) • webRTC obtains video stream data and transmits it
•Other unknown functions (x)
4. Effect drawing
5. Afterwords
The implementation of this application is relatively basic, and there is still a lot of room for improvement.
The above is the shared drawing board function implemented by socket.io and canvas introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!