Collaborative Whiteboard with React Canvas and SocketIO

Set up a full-screen canvas in a React whiteboard using useRef and useLayoutEffect. Draw sketchy rectangles and lines with rough-js.

Handle the mouse down on the canvas to start drawing a rectangle, logging clientX and clientY and using useSelector to read the tool type and set a drawing action.

Create rectangle element with a create element function using rough to generate from x1,y1 to x2,y2 and assign a unique id, then update selected element and elements state to redraw.

Add the newly created element to the elements array, set it as the selected element, and dispatch an update element action to update the canvas in the whiteboard Redux store.

Handle the mouse up event on the canvas to stop drawing, reset the action to null, and clear the selected element, preparing for drawing shapes like a rectangle.

Update a drawn rectangle on mouse move by tracking canvas coordinates, locating the selected element in the elements array, and dispatching updates to Redux to refresh coordinates.

Update the selected element during mouse move and reset on mouse up to draw a rectangle on the canvas by clearing and rendering the elements array.

Adjust element coordinates in the whiteboard app to ensure x1, y1, x2, y2 are ordered for rectangles, regardless of drawing direction, using Redux state and an adjust element coordinates utility.

Discover how socket.io enables bidirectional communication between a React canvas app and a server. Build a single shared whiteboard where events from one client update all others in real time.

Initialize a node project, install express, cors, and socket.io, and create index.js to run an http server with socket.io and a basic get endpoint on port 3003.

Connect your React client to a Socket.io server to enable bidirectional communication and per-user sockets. Emit the whiteboard state on new connections so new users receive the current whiteboard state.

Learn how to exchange whiteboard data with a socket.io server by emitting element updates, broadcasting changes to other clients, and syncing the initial board state via a centralized elements array.

Add a new line tool by introducing a line icon button, importing the line icon, updating tool types and Redux state, and implementing line drawing logic similar to the rectangle.

Create a line element on a collaborative whiteboard by handling mouse down, setting the selected element, and updating the Redux store with the new line coordinates.

Handle the mouse move event while drawing a line, updating coordinates of the selected element and using update element to draw lines instead of rectangles on the collaborative whiteboard.

Draw line on the canvas by updating its coordinates in the store. Add a line case to the draw function so the line renders for all users using rough canvas.

Adjust element coordinates on mouse up by handling line logic: swap x1 with x2 and y1 with y2 to ensure correct corner orientation, then prepare for future rubber drawing.

Add a rubber erase button to clear the local elements array and emit a socket event to the server to clear server-side data and notify all connected users.

Emit a whiteboard clear event to the server, reset the server's elements, broadcast the clear to all connected clients, and update each client store with an empty elements array.

Add a pencil tool button to the whiteboard menu, import the pencil icon, and update the Redux state to reflect selecting the pencil tool.

learn to implement a freehand pencil tool with the perfect freehand npm package in a react canvas, capturing mouse events into a points array to render the stroke.

Create and select a new pencil element when the pencil tool is used, add it to the store, and initialize its points array with the first coordinates.

Update the points array on mouse move for the pencil tool by appending new coordinates to the element's points, update the elements copy, store, and broadcast updates to collaborators.

Enable freehand pencil drawing on the canvas by implementing a draw pencil element that converts points to a stroke using perfect freehand and renders an SVG path on the canvas.

Fix a console error by adding the missing break in the update element’s switch case, enabling freehand drawing tool. The session demonstrates real-time collaboration and notes a future text tool.

Add a text tool button by importing the text icon, wiring it into the icons folder and tool types, and selecting the text tool in Redux.

Learn how to refactor the handle mouse down handler to add a new text writing action, update tool-type logic, and manage the selected element in the store.

Add a text case to the create element function, returning a text element with id, type, x, y, and text, and wire updates from the text area to the element.

Render a text area at the clicked location when writing, with 24px sans serif font, and blur updates the canvas via the elements array.

Draw a text element on the canvas by handling onblur, using fill text with the element coordinates and top baseline, then update the elements array when focus is lost.

Handle the onblur event to update a text element's content on the canvas, updating the elements store, measuring text width, and emitting an element update to other users.

Fix the get context from null error by adding the canvas id, then draw text on the canvas and fix a jumping position in upcoming video.

Fix the jumping effect when typing text in the text area by resetting the selected element on blur, ensuring text stays in the correct position and syncs with second user.

Add a new selection tool button with a selection icon to enable moving and resizing rectangles, wire it to the tool type and Redux state.

Implement get element at position to detect canvas elements under the cursor, using rectangle coordinates and near-point zones for resizing corners.

Fixes a position bug in the get element at position logic by mapping elements to identify the element under the cursor and updating the cursor appearance accordingly.

Implement a getCursorForPosition function to set the cursor according to element position on collaborative whiteboard, using a switch for top left, top right, bottom left, bottom right, and move cursor.

Identify the element at the cursor position and select it. Use element-at-position logic to move or resize with the mouse.

Calculate offset on mousedown, set selected element with that offset, and update its position on move to enable moving or resizing in a collaborative whiteboard using react canvas and socketio.

Implement moving logic in the collaborative whiteboard by handling mouse move with the selection tool, calculating new coordinates, updating the element, and emitting updates to the second user.

Fix the bug by correcting the action state in the mouse down handler to enable moving. Verify real time synchronization across clients by updating elements and redrawing canvas after moves.

Implement resizing in a collaborative whiteboard with React canvas, computing new x1, y1, x2, y2 coordinates via get resized coordinates, and updating elements on mouse move and mouse up.

Move text elements on the whiteboard by reusing the rectangle move logic. Handle mouse down and mouse move to detect text at a position and update its coordinates with offsets.

Resize a line on the collaborative whiteboard by implementing line point detection, handling mouse down events, and updating line coordinates (x1,y1, x2,y2) from start or end.

Learn to detect cursor proximity to a canvas line using endpoint distances and an offset, enabling moving and resizing in a collaborative whiteboard.