{"id":20036402,"url":"https://github.com/taiseen/learning-react-fabric-js","last_synced_at":"2025-09-20T08:32:25.412Z","repository":{"id":68005746,"uuid":"541861548","full_name":"taiseen/learning-react-fabric-js","owner":"taiseen","description":"React - Fabric JS - Canvas Drawing...","archived":false,"fork":false,"pushed_at":"2023-09-23T17:35:32.000Z","size":272,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-13T10:12:15.724Z","etag":null,"topics":["canvas","context-api","fabric-js","local-storage","modular-design","react-hot-toast","react-js","tailwind-css"],"latest_commit_sha":null,"homepage":"https://react-fabric-js.netlify.app","language":"JavaScript","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/taiseen.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":"2022-09-27T01:58:47.000Z","updated_at":"2024-07-14T19:00:50.000Z","dependencies_parsed_at":"2024-11-13T10:12:17.512Z","dependency_job_id":"9aab4fdc-aeae-4740-b863-0ee1501aca6e","html_url":"https://github.com/taiseen/learning-react-fabric-js","commit_stats":null,"previous_names":["taiseen/learning-react-fabric-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Flearning-react-fabric-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Flearning-react-fabric-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Flearning-react-fabric-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Flearning-react-fabric-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taiseen","download_url":"https://codeload.github.com/taiseen/learning-react-fabric-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233647978,"owners_count":18708164,"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":["canvas","context-api","fabric-js","local-storage","modular-design","react-hot-toast","react-js","tailwind-css"],"created_at":"2024-11-13T10:12:19.215Z","updated_at":"2025-09-20T08:32:20.044Z","avatar_url":"https://github.com/taiseen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 27 - Sep - 2022\n\n## Fabric Js Learning...\n\n### Tailwind setup\n\n * yarn add -D tailwindcss postcss autoprefixer\n * npx tailwindcss init -p\n * tailwind.config \n\n### Fabric Js \n\n * yarn add fabric\n * yarn add react-hot-toast\n\n\n\n## Features:-\n\n* 💾 save data at local-storage + ⌨ key operation\n* 🆗 preventing app crash, when save data become undefined...\n* 🔄 load data from local-storage...\n* ❌ single object delete operation + ⌨ key operation\n* ⛔ multiple object delete operation + ⌨ key operation\n* 📸 save as image, whole canvas drawing + ⌨ key operation\n* 🅰 select all object that draw in canvas + ⌨ key operation\n* 🔎 canvas zoom functionality \n* ⌨ \"tab\" key press event to navigate inside canvas object for selection... \n* ⌨ Check that Caps Lock is on\n* 🖱️ Get the mouse position\n* 📝 StickyNote demo testing add...\n\n\n\u003cbr/\u003e\n\n```\nDevelopers describe Fabric.js as \"The easiest way to work with HTML5 canvas\". \nIt provides interactive object model on top of canvas element. \nFabric also has SVG-to-canvas (and canvas-to-SVG) parser. \nUsing Fabric.js, you can create and populate objects on canvas, objects like simple geometrical shapes.\n```\n\n```\nThings to keep in mind:\nWhen inspecting the canvas, it’s important to note that there are two layers that exist \n1) upper canvas \u0026 \n2) lower canvas\n\nThe upper canvas is utilized by the Fabric.js API for handling events, groupings, etc. \nwhile we’re actually working on the lower canvas layer \u0026 The lower canvas contains the id we defined\n```\n\n\n* `canvas.clear()` will clear all objects on canvas.\n* `canvas.dispose()` will clear all objects on canvas \u0026 remove all listeners.\n\n## File \u0026 Folder hierarchy\n\n```\nsrc\n├── assets\n|   ├── Brush.jsx\n|   ├── Circle.jsx\n|   ├── Eraser.jsx\n|   ├── index.js\n|   ├── Rectangle.jsx\n|   ├── Text.jsx\n|   └── Triangle.jsx\n|\n├── components\n|   ├── Canvas.jsx\n|   ├── CanvasLine.jsx\n|   ├── Row1.jsx\n|   └── Row2.jsx\n|\n├── context\n|   └── CanvasContext.js\n|\n├── drawingTools\n|   ├── draw-i-Text.js\n|   ├── drawCircle.js\n|   ├── drawingBrush.js\n|   ├── drawRectangle.js\n|   ├── drawText.js\n|   ├── drawTextBox.js\n|   └── drawTriangle.js\n|\n├── features\n|   ├── copyPasteSelect.js\n|   ├── delete.js\n|   ├── loadSVG.js\n|   ├── mouseHover.js\n|   ├── r\u0026d.js\n|   ├── save.js\n|   ├── search.js\n|   ├── utils.js\n|   └── zoom.js\n|\n├── style\n|   └── index.css\n|\n├── App.jsx\n└── index.js\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Flearning-react-fabric-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaiseen%2Flearning-react-fabric-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Flearning-react-fabric-js/lists"}