Canvas
A browser-based drawing tool with free-form sketching, SVG backgrounds, and a full color palette. Works on desktop and touch screens.
- My role
- Frontend development
- Platform
- Web
- Project
- Drawing tool
The project
The idea
A quick sketch can make an idea easier to explain. Canvas explores how to bring free-form drawing, shapes, arrows, and text into a browser workspace that works with both mouse and touch input. I built it as a personal project to learn Vue.js and canvas-based interaction.
The solution
Users can draw, select and arrange objects, adjust colours and backgrounds, and save or export their scenes. The tools support quick diagrams as well as free-form sketches, with editing controls kept alongside the workspace.
The build
The app uses Vue.js and TypeScript, with Fabric.js for drawing and object manipulation and Pinia for state management. I added a custom free-drawing mode to improve stroke behaviour. The app is hosted on GitHub Pages, and I continue to refine its tools and interactions.
Built with
- Vue.js
- TypeScript
- Pinia
- GitHub Pages
- Fabric.js