Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/btf-kabir-2020/canvas-drawing-app
A feature-packed canvas drawing app built with React and Vite. Supports tools, custom colors, local storage for data persistence, and image export with transparency options.
https://github.com/btf-kabir-2020/canvas-drawing-app
canvas-drawing drawing-app drawing-tools front-end html html5-canvas mobile-friendly paint-app pwa react-app reactjs save-drawing ui web web-app website
Last synced: about 21 hours ago
JSON representation
A feature-packed canvas drawing app built with React and Vite. Supports tools, custom colors, local storage for data persistence, and image export with transparency options.
- Host: GitHub
- URL: https://github.com/btf-kabir-2020/canvas-drawing-app
- Owner: BTF-Kabir-2020
- License: bsd-2-clause
- Created: 2024-12-19T23:43:42.000Z (3 days ago)
- Default Branch: main
- Last Pushed: 2024-12-20T00:28:58.000Z (3 days ago)
- Last Synced: 2024-12-20T00:29:34.009Z (3 days ago)
- Topics: canvas-drawing, drawing-app, drawing-tools, front-end, html, html5-canvas, mobile-friendly, paint-app, pwa, react-app, reactjs, save-drawing, ui, web, web-app, website
- Language: TypeScript
- Homepage: https://canvas-drawing-app-zeta.vercel.app
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Canvas Drawing Application
This is a feature-rich canvas drawing application built with React and Vite. Users can draw with various tools, select custom colors, and save their creations. The application stores user data locally, ensuring progress is never lost, even if the browser is refreshed or closed.
## Features
- **Drawing Tools**: Choose from a brush, eraser, rectangle, circle, and triangle tools.
- **Color Palette**: Use a predefined color palette or select custom colors for your drawings.
- **Canvas Controls**: Clear the canvas or save your artwork as an image (supports transparent and non-transparent exports).
- **Persistent Data**: User data is stored in the browser's local storage, preserving your progress and tool settings.
- **Responsive Design**: Fully functional on desktop and mobile devices.
- **Export Options**: Download your drawings with or without transparency.
- **PWA Support**: The application works as a Progressive Web App, enabling offline usage and the ability to add to the home screen on mobile devices.
## Live Demo
You can view a live demo of the application [here]([https://www.example.com](https://canvas-drawing-app-zeta.vercel.app/)).
## Screenshots
## Installation
To run this application locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/BTF-Kabir-2020/Canvas-Drawing-App.git
cd Canvas-Drawing-App
2. Install the dependencies:
```bash
npm install
3. Start the application:
```bash
npm start
4. Open your browser and navigate to http://localhost:3000.
Usage
Select a drawing tool from the toolbar.
Pick a color from the color palette or create a custom color.
Use your mouse or touch screen to draw on the canvas.
Clear the canvas by clicking "Clear Canvas."
Save your artwork by clicking "Save as Image" (choose between transparent or non-transparent exports).
Technologies Used
- React.js
- Vite
- JavaScript
- HTML5 Canvas
- CSS
- Zustand (State Management)
- PWA (Progressive Web App)
- TailwindCSS
License
This project is licensed under the
[LICENSE](./LICENSE)
This project is licensed under the BSD 2-Clause License. See the LICENSE file for details.
Created by [BTF Kabir](https://github.com/BTF-Kabir-2020).