{"id":33003557,"url":"https://rgab1508.github.io/PixelCraft/","last_synced_at":"2025-11-18T09:01:08.216Z","repository":{"id":37995654,"uuid":"294734621","full_name":"rgab1508/PixelCraft","owner":"rgab1508","description":"A Pixel Art Editor","archived":false,"fork":false,"pushed_at":"2025-03-16T19:39:36.000Z","size":867,"stargazers_count":1402,"open_issues_count":16,"forks_count":84,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-10-02T18:38:33.381Z","etag":null,"topics":["canvas","canvas-api","computer-graphics","drawing","editor","image-manipulation","pixel-art","pixel-art-maker","pixel-editor","pwa"],"latest_commit_sha":null,"homepage":"https://rgab1508.github.io/PixelCraft","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rgab1508.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-09-11T15:37:50.000Z","updated_at":"2025-10-02T18:29:12.000Z","dependencies_parsed_at":"2025-03-25T13:10:26.848Z","dependency_job_id":null,"html_url":"https://github.com/rgab1508/PixelCraft","commit_stats":{"total_commits":93,"total_committers":7,"mean_commits":"13.285714285714286","dds":0.4516129032258065,"last_synced_commit":"2aa82632c960fb78ee488b156838fb0386cecfc3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rgab1508/PixelCraft","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgab1508%2FPixelCraft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgab1508%2FPixelCraft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgab1508%2FPixelCraft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgab1508%2FPixelCraft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rgab1508","download_url":"https://codeload.github.com/rgab1508/PixelCraft/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgab1508%2FPixelCraft/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285035891,"owners_count":27103933,"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","status":"online","status_checked_at":"2025-11-18T02:00:05.759Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","canvas-api","computer-graphics","drawing","editor","image-manipulation","pixel-art","pixel-art-maker","pixel-editor","pwa"],"created_at":"2025-11-13T15:00:26.577Z","updated_at":"2025-11-18T09:01:08.210Z","avatar_url":"https://github.com/rgab1508.png","language":"JavaScript","readme":"# PixelCraft\nA pixel Art \u0026 Animation Creation Tool Built using HTML5 Canvas.  \nIt is a Progressive Web App (PWA) with offline compatibility.  \nIt is mobile-friendly and is very easy to use.  \n\n![PixelCraft](icons/logo.png)\n\n## Overview\nThis App is Available at both these locations\n\nhttps://rgab1508.github.io/PixelCraft\n\nhttps://pixelcraft.web.app\n\nOn opening, you will get a screen as Follows\n\n![PixelCraft overview](images/overview.png)\n\nYou can choose Any Dimensions for your Canvas, *16 X 16* is the default dimension.  \nDimensions below *128 X 128* are preferable for smooth operation and GIF creation.\n\n## Toolbar\n\n![PixelCraft overview](images/toolbar.png)\n\nThe List Of all Tools and methods to use them are as follows\n\n### Pencil\n\nThe Pencil tool is the most basic tool and is used to draw pixels Freehand\n\n![Pencil Tool](https://user-images.githubusercontent.com/17960677/96023223-b83b8800-0e6f-11eb-8af1-0cfab42c19d7.png)\n\n### Eraser\n\nThe Eraser tool is used to erase a given pixel 1 pixel at a time. It has dimensions *1 X 1* and is fixed.\n\n![Eraser Tool](https://user-images.githubusercontent.com/17960677/96023372-f5077f00-0e6f-11eb-965f-815b37f0d7b2.png)\n\n### Paint Tool\n\nThe Paint tool is used to Flood Fill a given color with a new color. It works smoothly for dimensions under 128 X 128.\n\n![Paint tool](https://user-images.githubusercontent.com/17960677/96023668-66473200-0e70-11eb-81a2-9313b1580926.png)\n\n![Paint tool](https://user-images.githubusercontent.com/17960677/96023679-6b0be600-0e70-11eb-8451-0d5955f2c8b4.png)\n\n### Line Tool\n\nThe line tool is used to draw a line segment between 2 points using Bresenham line drawing algorithm.  \n\nClick on tool and click on 2 points to draw a line segment between them. \n\n![Line Tool](https://user-images.githubusercontent.com/17960677/96023893-b625f900-0e70-11eb-9b16-ac0d68f9423c.png)\n\n### Circle Tool\n\nThe Circle Tool is used to draw a circle with a given centre and Radius using Midpoint Circle Algorithm.\n\n![Circle Tool](https://user-images.githubusercontent.com/17960677/96024358-3d736c80-0e71-11eb-8c1a-acb528f027b6.png)\n\n### Ellipse Tool\n\nThe Ellipse Tool is used to draw an ellipse with given centre and it's radius along x-axis and y-axis.\n\n![Ellipse Tool](https://user-images.githubusercontent.com/17960677/96024638-a0fd9a00-0e71-11eb-9171-16944bf95b40.png)\n\n## GIF Tools\n\n### Add Frame\n\nThis tool adds the current state of canvas to the Frame Stack which can be later loaded or deleted. Each Frame is added with a delay of 100 ms, Same Frame can be multiple time to increase it's duration in GIF.\n\n![Frame 1](https://user-images.githubusercontent.com/17960677/96025150-5f212380-0e72-11eb-9dce-5335a1cddcb7.png)\n![Frame 2](https://user-images.githubusercontent.com/17960677/96025166-647e6e00-0e72-11eb-9249-1a9245b6e264.png)\n![Frame 3](https://user-images.githubusercontent.com/17960677/96025181-69dbb880-0e72-11eb-83e1-0e03f5060033.png)\n![Frame 4](https://user-images.githubusercontent.com/17960677/96025198-6fd19980-0e72-11eb-9ba7-50dbf804dda3.png)\n![Frame 5](https://user-images.githubusercontent.com/17960677/96025219-752ee400-0e72-11eb-9fe5-11074883d72a.png)\n![Frame 6](https://user-images.githubusercontent.com/17960677/96025252-7eb84c00-0e72-11eb-8a26-ee7015da3de7.png)\n\n### View Frame\n\nThis tool displays a Popup with all the current frames in the Frame stack.  \n\n**Load A Frame**: Click on the Frame.   \n**Delete A Frame**: Right Click / Long press on mobile, To delete a Frame. \n\n![Frame Panel](https://user-images.githubusercontent.com/17960677/96025802-48c79780-0e73-11eb-8ca1-4948226804ad.png)\n\n## Utility Tools\n\n### Undo/Redo\n\nThe Undo/Redo Functionality is not very advanced and is only capable of undoing/redoing 1 pixel at a time.  \nIt is only useful for correcting small mistakes, hence, it is advised to draw with care, or, add a frame if doing a big change with chances of mistake.\n\n![Undo/Redo Tool](https://user-images.githubusercontent.com/17960677/96026461-23875900-0e74-11eb-8682-479b33894a4f.png)\n![Undo/Redo Tool](https://user-images.githubusercontent.com/17960677/96026481-2bdf9400-0e74-11eb-8e4c-4c64508ae011.png)\n\n### Clear Window\n\nThis Tool is used to clear the current Canvas window.\n\nBefore:  \n![Clear Window](https://user-images.githubusercontent.com/17960677/96026664-73662000-0e74-11eb-8111-c46f54375056.png)  \nAfter:  \n![Claer Window](https://user-images.githubusercontent.com/17960677/96026681-7a8d2e00-0e74-11eb-9984-c267fb0290c9.png)  \n\n\n## Advanced Tools\n\n### Import image\n\nThis Tool is Used to import an image and convert it to Pixel Art of Given Dimensions.\n\n![Mona Lisa](https://user-images.githubusercontent.com/17960677/96027216-2df62280-0e75-11eb-880d-c1eed2a21fd6.png)\n![Mona Lisa Pixelated](https://user-images.githubusercontent.com/17960677/96027394-71509100-0e75-11eb-8260-c1ed426805bc.png)\n\n## Saving Pixel Art and GIF Animation\n\nOnce you are done with making your pixel art or animation frames you can export it as a PNG or GIF to share it on other platforms. Let's see how it's done.![Save Image](https://user-images.githubusercontent.com/17960677/96027946-4ca8e900-0e76-11eb-8d5c-08864cc2fce8.png)\n\n### Saving Image\n\nSave Image option is available in the Drop-down on top left corner, It will download a file named *canvas.png* with dimensions *10 x width X 10 x Height*\n\n### Saving GIF\n\nAfter making all the frames and making necessary changes in Frames Panel, you can export the GIF using option present in Dropdown. The dimensions will be same as that of image.\n\nThanks to [@eagleloid](https://github.com/eagleloid) for this fix [#44](https://github.com/rgab1508/PixelCraft/pull/44)\n\n## Color Palette \u0026 Transparency\n\nThe Following colors are available on the color Palette.\n\n![Color Palette](https://user-images.githubusercontent.com/17960677/96028508-fdaf8380-0e76-11eb-8502-18d49d96d059.png)\n\nYou can select any color by clicking on it.  \n\nYou can also set color Transparency to create translucent colors and create color combinations. This property can be used to create complex patterns with greater flexibility.\n**Right click on color to set transparency value between 0 and 1**\n\nThanks to [@mrfoogles](https://github.com/mrfoogles) for this fix [#41](https://github.com/rgab1508/PixelCraft/pull/41)\n\n![Complex Pattern](https://user-images.githubusercontent.com/17960677/96028936-95ad6d00-0e77-11eb-8a8c-07caa0f2a8b5.jpg)\n\n## PWA Support\n\nThis Web App is a Fully Compatible PWA and is installable.  \n\n![PWA Support](https://user-images.githubusercontent.com/17960677/96029402-3ef46300-0e78-11eb-8a54-d54b6dff458a.png)\n\nYou can install it either from the Dropdown or using the \"Add to Home Screen\" Button From Options.  \n\n## Some Pixel Arts Made with PixelCraft\n\n\u003cimg src=\"https://user-images.githubusercontent.com/17960677/96029683-a14d6380-0e78-11eb-8901-bff832a4cb6e.gif\" alt=\"canvas (1)\" width=\"250\" height=\"250\" \u003e\u003cimg src=\"https://user-images.githubusercontent.com/17960677/96029686-a3afbd80-0e78-11eb-8c03-0f407a5110fd.gif\" alt=\"canvas (2)\" width=\"250\" height=\"250\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/17960677/96029693-a4e0ea80-0e78-11eb-9528-1b303a89599e.gif\" alt=\"canvas\" width=\"250\" height=\"250\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/17960677/96029696-a5798100-0e78-11eb-8653-43ebc672f1d6.gif\" alt=\"canvas (29)\" width=\"250\" height=\"250\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/17960677/96029700-a7434480-0e78-11eb-8505-3b6539bc39d2.gif\" alt=\"canvas (9)\" width=\"250\" height=\"250\"\u003e\n","funding_links":[],"categories":["Tools"],"sub_categories":["Editors"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/rgab1508.github.io%2FPixelCraft%2F","html_url":"https://awesome.ecosyste.ms/projects/rgab1508.github.io%2FPixelCraft%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/rgab1508.github.io%2FPixelCraft%2F/lists"}