A lightweight, elegant drawing application built with HTML Canvas API and JavaScript getContext() method. This application provides an intuitive interface for creating very basic artwork without any external dependencies or libraries.
This is a nice-looking, elegant, and very simple web-based drawing application built with core web dev technologies. It uses no extra packages, dependencies, or web APIs, offering a minimal yet functional experience. Users can draw on a canvas using their mouse with few options to change the drawing color and clear the canvas.
- HTML
- CSS
- JavaScript (No Web APIs)
- Shapes(rectangle,circle,triangle) to select type of drawing shape.
- Fill color to draw shape with colors based on selected color.
- Brush to draw art on hand using mouse. Also based on selected color.
- Eraser to clean unwanted art or part on canvas board.
- Slider range to increase or decrese stroke size.
- Click clear canvas to reset the canvas board.
- Click save as image to download drawing art as image format.
To run the application locally:
-
Clone the Repository
git clone https://github.com/your-username/Drawing-Application.git
-
Navigate to the Folder
cd Drawing-Application -
Open the Project Folder
Open
index.htmlfile in your preferred web browser.
- Select Shapes(rectangle,circle,triangle) to draw shapes.
- Select fill color to draw shapes with colors based on selected colors.
- Choose a color using the color picker.
- Draw on the canvas board with your mouse.
- Use the brush to draw art on hand using mouse.
- Use the eraser to remove unwanted parts.
- Clear the canvas if you want to start over.
- Click the save as image to download your artwork as a
.jpgfile.
Contributions are welcome! If you'd like to improve this application:
- Fork the repository.
- Create your feature branch
git checkout -b 'feature/Amazing-Feature'. - Commit your changes
git commit -m 'Add some amazing feature'. - Push to the branch
git push origin 'feature/Amazing-Feature'. - Open a Pull Request.