I Built a Whiteboard Canvas Drawing App Using Next.js and React

Next.js 13 | React | Tailwind CSS

Hello everybody, My name is Rohit and today I am gonna show you how to build a Whiteboard canvas drawing App using Next.js 13 and React. Check out the Demo of the project 👇👇👇

✂️ Whiteboard Canvas Drawing App using Next.js 13 and React and Tailwind CSS

The code of this project is a bit hectic. But I demonstrated it step by step in a YouTube video. If you are a beginner in this field. Then I recommend you to check out this video. Others can get help from the algorithms.

Source Code & More: https://www.patreon.com/bugninza

Algorithm: Whiteboard Canvas Component

1. Initialization and State Setup:

• Import the necessary libraries and dependencies.
• Create a functional React component named WhiteboardCanvas.
• Define and initialize the following state variables:
  - canvasRef using the useRef hook.
  - context and initialize it to null.
  - drawing to track whether the user is currently drawing, initialized to false.
  - currentColor to store the current drawing color, initialized to ‘black’.
  - lineWidth to store the current line width, initialized to 3.
  - drawingActions to maintain a history of drawing actions, initialized as an empty array.
  - currentPath to store the points of the current drawing path, initialized as an empty array.
  - currentStyle to store the current drawing style, including color and line width, initialized with defaults.

2. Canvas Setup:

• In the useEffect hook, initialize the canvas:
  - Access the canvas element using canvasRef.
  - Set the canvas width to 900 and height to 500.
  - Get the 2D rendering context of the canvas and store it in the context state variable.
  - Call reDrawPreviousData to redraw any existing drawing actions.

3. Drawing Functions:

• Implement the following functions:
  - startDrawing(e): This function is called when the user starts drawing. It sets up the drawing context and marks the user as drawing.
  - draw(e): This function handles the drawing process. It updates the canvas with the current path, color, and line width.
  - endDrawing(): Called when the user stops drawing. It saves the current drawing path and style in the drawingActions array.

4. Color and Line Width Settings:

• Implement functions to change the current drawing color and line width. These functions update the currentColor and lineWidth state variables while preserving other style settings in currentStyle.

5. Undo and Clear Functions:

• Implement functions for undoing the last drawing action and clearing the entire canvas:
  - undoDrawing(): Removes the last drawing action from drawingActions and redraws the remaining actions on the canvas.
  - clearDrawing(): Clears the canvas and resets the drawing state.

6. Redraw Previous Data:

• Implement the reDrawPreviousData function, which redraws all drawing actions stored in drawingActions when initializing the canvas.

7. Render:

• Return JSX elements to render the whiteboard canvas component, including the canvas itself and UI elements for color selection, line width adjustment, and buttons for undo and clear actions.

That’s it. Happy hacking!!!!!