Paint Clone | ZTM JS Web Projects Course

Project 19/20

A fully functional Paint Clone app built with HTML, CSS, and JavaScript. It allows users to draw on a canvas with different brush sizes and colors, erase parts of their drawing, change the background color, and even save/load their artwork using local storage. Users can also download their creations as image files.

---

📚 Table of Contents

• 🔎 Overview
  • 📸 Screenshot
  • 🔗 Links
  • 📌 Features
  • 🛠️ Built with
• 🧠 My process
  • 🗃️ Useful resources
  • 🔙 Previous Project
  • 🔜 Next Project
• 👤 Author
  • 🌐 Connect with Me
  • 💻 Coding Profiles

---

🔎 Overview

📸 Screenshot

🔗 Links

• 🔴 Live Demo
• 🗂️ GitHub Repository

📌 Features

• ✅ Customizable brush size & color
• ✅ Bucket tool for background color
• ✅ Eraser tool
• ✅ Clear canvas with one click
• ✅ Save & load from Local Storage
• ✅ Download drawings as JPEG
• ✅ Responsive canvas
• ✅ Mobile warning for UX

🛠️ Built with

• HTML5
• CSS3
• JavaScript
• localStorage
• Canvas API
• jscolor.js

---

🧠 My Process

🗃️ Useful resources

• Font Awesome – Free Icons
• W3Schools – Range Slider
• W3Schools – Window innerHeight
• jscolor – Color Picker
• MDN – Canvas API Tutorial
• W3Schools – Mouse Events
• MDN – Drawing Shapes
• MDN – getBoundingClientRect()
• MDN – CanvasRenderingContext2D
• MDN – HTMLCanvasElement.toDataURL()

🔙 Previous Project

• Splash Page | Project 18/20 → View Repository

🔜 Next Project

• Pong | Project 20/20 → View Repository

---

👤 Author

🌐 Connect with Me

• Instagram
• YouTube

💻 Coding Profiles

• freeCodeCamp
• FrontendMentor
• GitHub

🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀