Skip to content

ezDecode/Fun-Canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

📝 Canvas Note Taking App

A modern, canvas-based note-taking application that simulates a realistic pen and paper experience. Built with HTML5 Canvas, CSS3, and vanilla JavaScript.

✨ Features

  • 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

🚀 Setup

  1. Clone this repository
  2. Open index.html in your web browser
  3. Start taking notes!

📚 Usage

  • 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

🛠 Technologies Used

  • HTML5 Canvas
  • CSS3
  • Vanilla JavaScript

📖 Project Explanation

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.

Main Features:

  • 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.

How It Works:

  1. Open the app in a web browser.
  2. Select a tool from the toolbar (pen, pencil, eraser, shapes, etc.).
  3. Start drawing on the canvas.
  4. Customize using color, stroke width, and page style.
  5. Add new pages, switch between pages, and save your work.

📄 License

MIT License - Feel free to use and modify for your own projects!

About

FunCanvas (Interactive Note-Taking App)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published