{"id":19213567,"url":"https://github.com/mairfarooq21/canvaslab","last_synced_at":"2026-05-02T20:33:57.754Z","repository":{"id":261947599,"uuid":"874739324","full_name":"mairfarooq21/canvaslab","owner":"mairfarooq21","description":"Canvas Lab is an interactive application that allows users to create sketches and diagrams on a digital canvas.","archived":false,"fork":false,"pushed_at":"2024-11-09T12:37:31.000Z","size":182,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-04T17:47:30.994Z","etag":null,"topics":["css","reactjs","roughjs"],"latest_commit_sha":null,"homepage":"https://canvaslab.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mairfarooq21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-18T11:27:33.000Z","updated_at":"2024-12-05T02:08:48.000Z","dependencies_parsed_at":"2024-11-09T13:31:07.971Z","dependency_job_id":"ae7a1a76-dd3a-405f-8492-979b8af5ae91","html_url":"https://github.com/mairfarooq21/canvaslab","commit_stats":null,"previous_names":["mairfarooq21/canvaslab"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mairfarooq21%2Fcanvaslab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mairfarooq21%2Fcanvaslab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mairfarooq21%2Fcanvaslab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mairfarooq21%2Fcanvaslab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mairfarooq21","download_url":"https://codeload.github.com/mairfarooq21/canvaslab/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240286519,"owners_count":19777353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","reactjs","roughjs"],"created_at":"2024-11-09T14:06:21.712Z","updated_at":"2025-11-13T20:02:26.123Z","avatar_url":"https://github.com/mairfarooq21.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## CanvasLab\n\nCanvasLab 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.\n\n## Technologies\n\n- React.js\n- CSS\n- TypeScript\n- Rough.js\n\n## Features\n\n**Choose a Tool**: You have pencils, lines, rectangles, and text tools. Pick one and start creating.\n\n**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.\n\n**Edit Text**: Click on the canvas and start typing to add text to your drawings. You can also edit existing text.\n\n**Zoom**: Use Ctrl + Scroll or click on the buttons to zoom in for detail or out to see the whole picture.\n\n**Pan**: Hold the Space bar and drag or use the middle mouse button to move around the whiteboard canvas.\n\n## Running the Project\n\nTo run the project in your local environment, follow these steps:\n\n1. Clone the repository to your local machine.\n2. Run `npm install` or `yarn` in the project directory to install the required dependencies.\n3. Run `npm run start` or `yarn start` to get the project started.\n4. Open [http://localhost:5173](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmairfarooq21%2Fcanvaslab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmairfarooq21%2Fcanvaslab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmairfarooq21%2Fcanvaslab/lists"}