Etch-a-Sketch
TypeScript
HTML5
SCSS
CSS3
Figma
🎨 Click here to visit 🖌️
A playful canvas built for experimentation, precision, and creative control.
Etch-a-Sketch is an interactive drawing application developed as an early independent web project, focused on exploring core browser technologies through hands-on visual feedback. Built with HTML, CSS, and vanilla JavaScript, and eventually refactored into TypeScript and SCSS, the project transforms a grid-based canvas into a flexible drawing surface that responds fluidly to user input.
Users paint by clicking and dragging across the canvas, with detailed control over color values and stroke strength. Adjustable grid sizing allows the canvas to scale from coarse sketches to highly detailed compositions, while multiple drawing tools support a wide range of creative approaches. Features such as rainbow and blend modes introduce variation and experimentation, encouraging exploration of different visual outcomes. The canvas, its tools, and the layout are supported for all platforms.
The application supports canvas manipulation through clearing, tool switching, and image export. Completed drawings can be downloaded as PNG files, allowing users to preserve and share their work. Designed to run entirely in the browser without external dependencies, Etch-a-Sketch emphasizes direct interaction, immediate feedback, and creative freedom through fundamental web technologies.
