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.
- 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.
You can view a live demo of the application here.
To run this application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/BTF-Kabir-2020/Canvas-Drawing-App.git cd Canvas-Drawing-App -
Install the dependencies:
npm install
-
Start the application:
npm start
-
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
This project is licensed under the BSD 2-Clause License. See the LICENSE file for details.
Created by BTF Kabir.