Canvas Studio

📖 What It Does

Canvas Studio is a responsive browser drawing app built with HTML5 Canvas, CSS, and Vanilla JavaScript. It gives users a compact art workspace with multiple drawing tools, layer controls, undo/redo, file import, project save/load, PNG export, and a mobile-friendly Canvas/Layers tab layout.

🎮 How to Use

Select brush, pencil, eraser, fill, or a shape tool
Adjust brush size and choose a color from the palette
Add layers and switch the active layer from the sidebar
Toggle layer visibility or change opacity for lighter effects
Use undo/redo for changes on the active layer
Save your artwork as JSON and reload it later
Import an image onto the active layer
Export the final visible artwork as a PNG file

✨ Key Features

            
                Drawing Tools: Brush, pencil, eraser, fill,
                line, rectangle, circle, and triangle tools
              
                Layer System: Add, select, delete, hide, and
                adjust opacity for separate canvas layers
              
                Live Shape Preview: Preview shapes while
                dragging before committing them to the active layer
              
                History Controls: Undo and redo changes per
                layer with keyboard shortcuts
              
                File Workflow: Save/load layered JSON projects,
                import images, and export PNG artwork
              
                Responsive UI: Dedicated mobile tabs for Canvas
                and Layers on screens 767px and below

🚀 Key JavaScript Concepts

            
                Canvas API: Drawing strokes, shapes, previews,
                compositing, image import, and PNG export
              
                State Management: Active tool, color, brush
                size, active layer, visibility, opacity, and history stacks
              
                DOM Rendering: Dynamic layer list, thumbnails,
                buttons, status updates, and popup controls
              
                FileReader API: Loading image files and saved
                JSON drawing projects
              
                Touch Events: Mobile drawing support with
                touch-to-pointer coordinate mapping
              
                Keyboard Shortcuts: Fast tool switching and
                undo/redo controls

🎨 Design Features

Compact creative-tool interface with soft purple accents
Layer sidebar inspired by lightweight design editors
Checkerboard canvas background for a transparent-workspace feel
Gradient primary actions, circular swatches, and hover tooltips
Responsive toolbar and mobile Canvas/Layers tab navigation

💻 Technologies Used

HTML5 CSS3 Vanilla JavaScript Canvas API FileReader API Responsive Design