A basic web whiteboard using React and Fabric.js on which users can
- Draw curves
- Erase drawn lines
See image above. The whiteboard should span the entire width and length of the window. The app you make should follow the design as closely as possible.
A basic whiteboard with drawing features has already been made for you, and you can use it as a starting point. To run it:
- Clone this repository to your system
- Run
npm i - Run
npm start - Access the app from http://localhost:3000. Click and drag your mouse to draw.
- You can also run the output straight from the deployment link given.
- After opening the localhost link or deployment link, perform the following steps.
1.Login Page
**There are two options in the login page Either you can login by using authentication which is authenticated by firebase or you can login as a guest without any passwords. **
Login as Guest:
Login with authentication:
If you have already logined as guest, then just reload the page to login with password.
The authentications are given below:
You can try any emails in the above given image where the password is same - vidhyalai
1.Tool Button with color picker
The tool button on the top left corner of the window is the tool button. Our whiteboard has the following tools, 1.Pencil/Brush 2.Move (used to move the drawed objects) 3.Highlighter 4.Shapes (Circle, Square, Rectangle, Triangle and Oval) 5.Line 6.Curve
It also contains size range width for changing the size of the tool/image.
2.Erase Button
Erase tool is used to erase the drawings in the window. It It also contains size range width for changing the size.
3.Page Navigation buttons
Contains the count of pages and the navigation buttons.
4.Create/Delete Page options
Contains buttons to create and delete pages.
5.Save buttons
Contains Three buttons, 1.Save. 2.Save to server (local server storage). 3.Load from server.
