Free Digital Whiteboard for Drawing & Diagrams Digital whiteboard with drawing tools, shapes, text, and eraser for brainstorming.

The tool works by utilizing the React library to manage its state and handle user interactions. It employs the `useState` hook to store variables such as the current drawing state, color, brush size, and active tool. The `useRef` hook is used to reference DOM elements like the canvas and overlay, allowing for direct manipulation of these elements. When a user starts drawing, the `startDraw` function is called, which sets the drawing state to true and records the initial position of the mouse or touch event.

The `drawMove` function is responsible for updating the drawing in real-time as the user moves their mouse or finger. It uses the `getPos` function to calculate the current position of the mouse or touch event relative to the canvas, and then updates the overlay with a preview of the shape being drawn. If the active tool is set to pen or eraser, it draws directly on the canvas using the `strokeStyle` and `lineWidth` properties of the 2D drawing context. The `clearOverlay` function is used to remove any previous previews from the overlay.

The tool also uses the `useCallback` hook to memoize functions like `initCanvas`, which initializes the canvas with a grid pattern, and `saveState`, which saves the current state of the canvas to an array of ImageData objects. This allows for undo functionality by storing a history of canvas states. The `ImageData` object is used to store the pixel data of the canvas, allowing for efficient saving and loading of the canvas state. The tool also uses the `getContext` method to access the 2D drawing context of the canvas, which provides methods for drawing shapes, lines, and text.

The text placement feature uses a separate state variable to store the position and text content of each note. When a user adds a new text note, the `addTextNote` function is called, which updates the canvas with the new text using the `fillStyle` and `font` properties of the 2D drawing context. The tool also uses an array of colors, defined in the `COLORS` constant, to allow users to select different colors for their drawings and text notes. Overall, the tool's combination of React state management, DOM manipulation, and Canvas API usage allows it to provide a smooth and responsive user experience.