A modern, canvas-based note-taking application that simulates a realistic pen and paper experience. Built with HTML5 Canvas, CSS3, and vanilla JavaScript.
- Canvas-based writing interface with pen and pencil tools
- Eraser tool for removing strokes
- Selection tool for copying specific areas
- Infinite page support with auto-save reminders
- Clean and responsive user interface
- Paper-like drawing experience
- Shapes support: Draw rectangles, circles, arrows, lines, and triangles
- Undo and clear buttons for quick fixes
- Custom styles: Change stroke color, thickness, and page background (grid, ruled, dotted, or plain)
- Save notes: Export drawings as images or ZIP files
- Full-screen mode for distraction-free work
- Responsive UI for both desktop and mobile devices
- Clone this repository
- Open
index.htmlin your web browser - Start taking notes!
- Use the toolbar to switch between pen, pencil, eraser, and shapes tools
- Click the "Add Page" button to create new pages
- Use the selection tool to copy specific areas of your notes
- Customize your drawing with color, stroke width, and page style
- Save your work regularly using the save button
- Switch between pages easily and work in full-screen mode for better focus
- HTML5 Canvas
- CSS3
- Vanilla JavaScript
Your project, Canvas Note-Taking App, is an interactive drawing and note-taking tool using an HTML5 Canvas. It allows users to write, draw, and create notes just like they would on paper.
- Canvas-Based Writing – Users can draw using a pen or pencil.
- Eraser Tool – Mistakes? No worries! Just erase them.
- Shapes Support – Draw rectangles, circles, arrows, lines, and triangles.
- Page Management – Create multiple pages and switch between them easily.
- Undo and Clear – Fix mistakes quickly with an Undo button.
- Custom Styles – Change stroke color, thickness, and page background (grid, ruled, dotted, or plain).
- Save Notes – Export drawings as images or ZIP files.
- Full-Screen Mode – Work distraction-free.
- Responsive UI – Works on both desktop and mobile devices.
- Open the app in a web browser.
- Select a tool from the toolbar (pen, pencil, eraser, shapes, etc.).
- Start drawing on the canvas.
- Customize using color, stroke width, and page style.
- Add new pages, switch between pages, and save your work.
MIT License - Feel free to use and modify for your own projects!