Drawing App is a browser-based drawing application leveraging HTML5 Canvas API for smooth, real-time drawing experience. Users can create digital artwork with customizable brush sizes, colors, and tools. The application features an intuitive toolbar interface with social sharing capabilities and responsive design for all devices.
Tech Stack
HTML5
CSS3
JavaScript
Canvas API
Browser APIs
Tools Used
VS Code
Chrome DevTools
GitHub
Key Features
Drawing Tools
▸Canvas Drawing: HTML5 Canvas API for smooth, lag-free drawing experience.
▸Brush Customization: Adjustable brush size, opacity, and multiple brush styles.
▸Color Selection: Dynamic color picker for foreground and background colors.
▸Eraser & Tools: Multiple drawing tools including pen, eraser, and fill options.
User Experience
▸Real-time Rendering: Immediate visual feedback as users draw on canvas.
▸Social Sharing: Integrated buttons for sharing artwork on social media platforms.
▸Responsive Layout: Adapts seamlessly to desktop and mobile screens.
▸Icon-based Toolbar: SVG icons for clear tool identification and accessibility.
Performance & Assets
▸Optimized Rendering: Efficient Canvas state management for smooth performance.
▸Asset Organization: Organized icon and favicon directories for easy maintenance.
▸Browser Compatibility: Works across modern browsers with Canvas support.
▸Lightweight: Minimal dependencies for fast loading.
Highlights
Real-time Canvas Drawing
Intuitive Toolbar UI
Social Media Integration
Responsive Mobile Design
Installation
Clone Repository
git clone https://github.com/Itsayu/Drawing-App.git
cd Drawing-App
Open in Browser
# Open index.html in your web browser
open index.html # macOS
start index.html # Windows
xdg-open index.html # Linux
Challenges & Solutions
Challenge
Canvas Performance with Continuous Drawing
Solution
Implemented requestAnimationFrame and efficient state management to maintain smooth drawing at 60fps.
Challenge
Touch and Mouse Event Handling
Solution
Created unified event handler for both mouse and touch events enabling drawing on all devices.