https://github.com/mairfarooq21/canvaslab
Canvas Lab is an interactive application that allows users to create sketches and diagrams on a digital canvas.
https://github.com/mairfarooq21/canvaslab
css reactjs roughjs
Last synced: 5 months ago
JSON representation
Canvas Lab is an interactive application that allows users to create sketches and diagrams on a digital canvas.
- Host: GitHub
- URL: https://github.com/mairfarooq21/canvaslab
- Owner: mairfarooq21
- Created: 2024-10-18T11:27:33.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-11-09T12:37:31.000Z (8 months ago)
- Last Synced: 2025-01-04T17:47:30.994Z (6 months ago)
- Topics: css, reactjs, roughjs
- Language: TypeScript
- Homepage: https://canvaslab.vercel.app
- Size: 178 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.