CanvasLab

CanvasLab is a drawing application using React and TypeScript, incorporating Rough.js to achieve a sketchy, hand-drawn aesthetic. This side project was created for learning purposes, and while the app is not responsive, I concentrated on enhancing its functionalities, as I already have numerous responsive projects in my portfolio.

Technologies

• React.js
• CSS
• TypeScript
• Rough.js

Features

Choose a Tool: You have pencils, lines, rectangles, and text tools. Pick one and start creating.

Draw and Move: Click and drag on the canvas to draw. To move something, select it and drag it to a new spot. Also, resize elements by dragging the corners. Resizing only works on rectangles or lines.

Edit Text: Click on the canvas and start typing to add text to your drawings. You can also edit existing text.

Zoom: Use Ctrl + Scroll or click on the buttons to zoom in for detail or out to see the whole picture.

Pan: Hold the Space bar and drag or use the middle mouse button to move around the whiteboard canvas.

Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.