Realtime-Canvas

This is a collaborative whiteboard that allows real-time communication through sockets. It was built using React.js and Node js. Users can share a room and draw on canvas which will be updated on every user's screen in real time.😉Even it is faster than Google Jamboard.

Canvas Features: A user can change basic properties of the canvas like:

  1. Color Picker: The color of the brush stroke could be easily changed. For this purpose, a color palette is provided for the user to make their choice.
  2. Pen Size Slider: The width of the brush stroke could also be easily changed by the user by sliding. The user is provided with some defaults.
  3. Full Screen: This button is used for toggling between full-screen mode and normal mode.
  4. Latency-Mode: By default, Latency is set to High but the user can toggle between Low and High latency Mode. High latency mode is basically when the user lifts the pen then this drawn line will be reflected & In low latency mode when the pen is moving it reflects changes in real-time without any delay to others' screens.
  5. Eraser: The project also provides the ability to erase the changes made to the canvas. When you erase a portion it will be filled with the default background color.
  6. Undo-Redo(Under Development): The project also provides the ability to undo-redo the changes made to the canvas. 7. Clear Screen: The project also provides the ability to Clear all the Screen on a single click.

Demo 😎

https://soumya-realtime-canvas.herokuapp.com/ Image 114

Screenshot-2022-08-07-00-20-43-317-com-android-chrome.jpg

Demo.mp4