Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vishanurag/canvas-editor
This is a simple web project that is made with an aim to learn about canvas element of html. Now, this project is open to all of the amazing contributors.
https://github.com/vishanurag/canvas-editor
beginner-friendly canvas gssoc gssoc-ext gssoc24 hacktoberfest hacktoberfest-accepted html-css-javascript open-source project web
Last synced: 7 days ago
JSON representation
This is a simple web project that is made with an aim to learn about canvas element of html. Now, this project is open to all of the amazing contributors.
- Host: GitHub
- URL: https://github.com/vishanurag/canvas-editor
- Owner: vishanurag
- License: mit
- Created: 2024-06-28T15:24:39.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-24T18:29:19.000Z (29 days ago)
- Last Synced: 2025-01-06T22:20:37.259Z (15 days ago)
- Topics: beginner-friendly, canvas, gssoc, gssoc-ext, gssoc24, hacktoberfest, hacktoberfest-accepted, html-css-javascript, open-source, project, web
- Language: HTML
- Homepage: https://vishanurag.github.io/Canvas-Editor/
- Size: 8.8 MB
- Stars: 73
- Watchers: 1
- Forks: 304
- Open Issues: 494
-
Metadata Files:
- Readme: README.md
- Contributing: Contributing.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🎨 Canvas Editor 🖌️
🌟 Stars
🍴 Forks
🐛 Issues
🔔 Open PRs
🔕 Close PRs
🛠️ Languages
👥 Contributors
Open-Source-Programmes⭐
### This project is now OFFICIALLY accepted for
Event Logo
Event Name
Event Description
GirlScript Summer of Code 2024
GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.
Hacktoberfest 2024
Hacktoberfest is a month-long celebration of open source software run by DigitalOcean, GitHub, and Twilio. It encourages contributions to open source projects and promotes a global community of developers.
Hi there,
Enjoy the World of Open source contribution 
Hello Coders!!👨💻
I am Aanurag Vishwakarma, an aspiring Web developer🤖. Here is the project on front-end Web Development.
## Table of Contents
- [Overview](#overview)
- [Project Structure](#project-structure)
- [Website Preview](#website-preview)
- [Technologies Used](#technologies-used)
- [How to make a Pull Request](#how-to-make-a-pull-request)
- [Troubleshooting](#troubleshooting)
- [Contributors](#contributors)
## Overview
- 🎨 This repository contains my project on a Canvas Editor using HTML, CSS, Bootstrap, and JavaScript.
- 🖼️ It includes a webpage with a canvas element that allows you to style text content as needed (made for fun purposes 🎉).
- 🚀 We welcome all contributions to make this a fantastic resource for other users.
- 💻 Jump in and contribute to this grand project
- 📚 Read the guidelines and get started building! 🛠️
- 🚀 The project now supports setting background images and colors, enhancing the customization options for your canvas!
- 🎉 This project is open to contributions from the community. Jump in and help make it a great resource!
## Project Structure
```
├── 404.html
├── Blog_page.html
├── CODE_OF_CONDUCT.md
├── Contributing.md
├── Faq.html
├── Feedback.html
├── LICENSE
├── README.md
├── about-us.html
├── about.html
├── auth.css
├── auth.html
├── basictemp.html
├── blog.html
├── canva.css
├── canva.html
├── canva.js
├── canva.md
├── community.html
├── contact.html
├── contributors.html
├── download (1).webp
├── edition.html
├── feature.webp
├── gssocextd.webp
├── index.html
├── login.html
├── logo4.png
├── package-lock.json
├── package.json
├── popup.jpg
├── popup.js
├── privacy.html
├── profile.html
├── profileedit.html
├── repo_structure.txt
├── repreviewfix.html
├── resources/
│ ├── favicon.ico
│ └── painting_image.webp
├── review.html
├── script1.js
├── signup.html
├── src/
│ ├── Contributor.css
│ ├── Contributor.html
│ ├── Contributor.js
│ ├── Scripts/
│ │ ├── BacktoTop.js
│ │ ├── Canvas.js
│ │ ├── Save.js
│ │ ├── contributor.js
│ │ └── preloader.js
│ ├── Styles/
│ │ ├── Responsive.css
│ │ ├── Style.css
│ │ ├── Style_Blog_page.css
│ │ ├── contact.css
│ │ ├── contact.html
│ │ ├── contributor.css
│ │ ├── scroll.css
│ │ └── signup.css
│ ├── bootstrap/
│ │ └── css/
│ │ ├── bootstrap-grid.css
│ │ ├── bootstrap-grid.css.map
│ │ ├── bootstrap-grid.min.css
│ │ ├── bootstrap-grid.min.css.map
│ │ ├── bootstrap-grid.rtl.css
│ │ ├── bootstrap-grid.rtl.css.map
│ │ ├── bootstrap-grid.rtl.min.css
│ │ ├── bootstrap-grid.rtl.min.css.map
│ │ ├── bootstrap-reboot.css
│ │ ├── bootstrap-reboot.css.map
│ │ ├── bootstrap-reboot.min.css
│ │ ├── bootstrap-reboot.min.css.map
│ │ ├── bootstrap-reboot.rtl.css
│ │ ├── bootstrap-reboot.rtl.css.map
│ │ ├── bootstrap-reboot.rtl.min.css
│ │ ├── bootstrap-reboot.rtl.min.css.map
│ │ ├── bootstrap-utilities.css
│ │ ├── bootstrap-utilities.css.map
│ │ ├── bootstrap-utilities.min.css
│ │ ├── bootstrap-utilities.min.css.map
│ │ ├── bootstrap-utilities.rtl.css
│ │ ├── bootstrap-utilities.rtl.css.map
│ │ ├── bootstrap-utilities.rtl.min.css
│ │ ├── bootstrap-utilities.rtl.min.css.map
│ │ ├── bootstrap.css
│ │ ├── bootstrap.css.map
│ │ ├── bootstrap.min.css
│ │ ├── bootstrap.min.css.map
│ │ ├── bootstrap.rtl.css
│ │ ├── bootstrap.rtl.css.map
│ │ ├── bootstrap.rtl.min.css
│ │ └── bootstrap.rtl.min.css.map
│ └── images/
│ ├── about-bg.webp
│ ├── art-design-1.webp
│ ├── art-design-2.webp
│ ├── art-design-3.webp
│ ├── art-design-4.webp
│ ├── art-design-5.webp
│ ├── art-design-6.webp
│ ├── banner-bg.webp
│ ├── blog-p-1.webp
│ ├── blog-p-2.webp
│ ├── blog-p-3.webp
│ ├── blog-p-4.webp
│ ├── blog-p-5.webp
│ └── blog-p-6.webp
├── story.jpg
├── style.css
├── style1.css
├── testimonial.html
├── testp.css
├── testp.js
├── tooltips.html
├── tutorial.html
├── visi.css
├── visi.js
├── visitor.css
├── visitor.js
└── welcome.html
```
### New Features ✨
## Website Preview
### How to Use
To change the background color or image:
## Technologies Used
Getting Started💥
## How to make a Pull Request?
**1.** Start by forking the [**Canvas-Editor**](https://github.com/vishanurag/Canvas-Editor) repository. Click on the 
symbol at the top right corner.
**2.** Clone your forked repository:
```bash
git clone https://github.com//Canvas-Editor
```
**3.** Navigate to the new project directory:
```bash
cd Canvas-Editor
```
**4.** Set upstream command:
```bash
git remote add upstream https://github.com/vishanurag/Canvas-Editor
```
**5.** Create a new branch:
```bash
git checkout -b YourBranchName
```
or
```bash
git branch YourBranchName
git switch YourBranchName
```
**6.** Sync your fork or local repository with the origin repository:
- In your forked repository click on `Fetch upstream`.
- Click `Fetch and merge`.
### Alternatively, Git CLI way to Sync forked repository with origin repository:
```bash
git fetch upstream
```
```bash
git merge upstream/main
```
### [Github Docs](https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github) for Syncing
**7.** Make your changes to the source code.
**8.** Stage your changes and commit:
⚠️ **Make sure** not to run the commands `git add .` or `git add *`. Instead, stage your changes for each file/folder
```bash
git add file/folder
```
```bash
git commit -m ""
```
**9.** Push your local commits to the remote repository:
```bash
git push origin YourBranchName
```
**10.** Create a [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)!
**Congratulations! You've made your first contribution! 🙌🏼**
# Project Admin⚡
Anurag Vishwakarma
# Project Mentor⚡🧑💻
Somyadip Ghosh
## Troubleshooting
### Common Issues
1. **Installation Error: `npm install` fails**
- **Symptoms:** Error messages during the installation process.
- **Solution:**
- Ensure you have the latest version of Node.js and npm installed. You can check your versions using `node -v` and `npm -v`.
- Clear the npm cache by running `npm cache clean --force`.
- Try deleting the `node_modules` folder and the `package-lock.json` file, then rerun the installation with `npm install`.
2. **Wallet Connection Issues**
- **Symptoms:** Unable to connect to MetaMask.
- **Solution:**
- Verify that MetaMask is installed and enabled in your browser.
- Check that you are on the correct network (e.g., Rinkeby) in both your app and MetaMask.
- Ensure that your wallet is unlocked. If issues persist, refresh the page or restart your browser.
3. **Smart Contract Deployment Fails**
- **Error Message:** `Revert: Contract validation failed`
- **Solution:**
- Double-check that all contract parameters are accurate and align with your contract’s requirements.
- Make sure you have sufficient Ether in your wallet to cover gas fees.
- Confirm that you are deploying to the intended network.
### Configuration Issues
- Ensure that the `.env` file is properly configured with the necessary environment variables, including your Infura Project ID and wallet private key.
### Development Environment
- Make sure you are using Node.js version **16.x.x** or **18.x.x** and that all required npm packages are installed. You can check your current Node.js version using `node -v`.
### Tips for Optimizing Performance
- Minimize the number of unnecessary background tasks during deployment to improve efficiency.
- Monitor gas fees closely and consider deploying during off-peak hours to reduce costs.
### Contact for Support
If you encounter an issue not listed here, please reach out via [GitHub Issues](https://github.com/vishanurag/Canvas-Editor/issues).
## Contributors
We are immensely grateful to the following amazing individuals who have contributed their time, effort, and expertise to make this project better. Your contributions, whether through code, documentation, bug reports, or feature suggestions, have been invaluable. Thank you for helping us build and improve Canvas Editor 🌟✨
Your dedication and hard work are what drive this project forward, and we couldn't have done it without you. Each contribution, no matter how small, plays a crucial role in our journey towards creating a more efficient and user-friendly tool for developers. 🙌💻
We look forward to your continued support and collaboration. Together, we can achieve even greater heights! 🚀🌐
Thank you once again to all our contributors! Your efforts are truly appreciated. 💖👏
### ↳ Stargazers
[](https://github.com/vishanurag/Canvas-Editor/stargazers)
### ↳ Forkers
[](https://github.com/vishanurag/Canvas-Editor/network/members)
## 🌐 Connect with Me
---
Thank you for visiting! Feel free to reach out through any of the links above.