Skip to content

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.

License

Notifications You must be signed in to change notification settings

sakship2005/Canvas-Editor

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 Canvas Editor πŸ–ŒοΈ


🌟 Stars 🍴 Forks πŸ› Issues πŸ”” Open PRs πŸ”• Close PRs πŸ› οΈ Languages πŸ‘₯ Contributors
Stars Forks Issues Open Pull Requests Close Pull Requests GitHub language count GitHub Contributors count

Open-Source-Programmes⭐

This project is now OFFICIALLY accepted for

Event Logo Event Name Event Description
GSSoC 24 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 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

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

β”œβ”€β”€ Blog_page.html
β”œβ”€β”€ CODE_OF_CONDUCT.md
β”œβ”€β”€ Contributing.md
β”œβ”€β”€ Faq.html
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ about-us.html
β”œβ”€β”€ about.html
β”œβ”€β”€ blog.html
β”œβ”€β”€ community.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
β”œβ”€β”€ repo_structure.txt
β”œβ”€β”€ repreviewfix.html
β”œβ”€β”€ resources/
β”‚   β”œβ”€β”€ favicon.ico
β”‚   └── painting_image.webp
β”œβ”€β”€ review.html
β”œβ”€β”€ 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_us_style.css
β”‚   β”‚   β”œβ”€β”€ 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
β”œβ”€β”€ style.css
β”œβ”€β”€ testimonial.html
β”œβ”€β”€ tutorial.html
β”œβ”€β”€ visi.css
β”œβ”€β”€ visi.js
β”œβ”€β”€ visitor.css
β”œβ”€β”€ visitor.js
└── welcome.html

New Features ✨

  • Background Image: Easily set an image as the background of your canvas to create more visually appealing designs
  • Background Color: You can now add a custom background color to the canvas with ease!
  • Website Preview

    image

    image

    How to Use

    To change the background color or image:

  • Navigate to the canvas options on the webpage!
  • For background color: Select a color from the color picker to apply it to the canvas!
  • For background image: Upload an image file, and it will be displayed as the canvas background!

  • Technologies Used

    HTML CSS js

    Back To Top

    Getting StartedπŸ’₯

    How to make a Pull Request?

    1. Start by forking the Canvas-Editor repository. Click on the symbol at the top right corner.

    2. Clone your forked repository:

    git clone https://github.com/<your-github-username>/Canvas-Editor

    3. Navigate to the new project directory:

    cd Canvas-Editor

    4. Set upstream command:

    git remote add upstream https://github.com/vishanurag/Canvas-Editor

    5. Create a new branch:

    git checkout -b YourBranchName

    or

    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:

    git fetch upstream
    git merge upstream/main

    Github Docs 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

    git add file/folder
    git commit -m "<your_commit_message>"

    9. Push your local commits to the remote repository:

    git push origin YourBranchName

    10. Create a Pull Request!

    Congratulations! You've made your first contribution! πŸ™ŒπŸΌ

    Back To Top

    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.

    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

    Stargazers repo roster for @vishanurag/Canvas-Editor

    ↳ Forkers

    Forkers repo roster for @vishanurag/Canvas-Editor

    About

    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.

    Resources

    License

    Code of conduct

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published

    Languages

    • HTML 72.7%
    • CSS 21.5%
    • JavaScript 5.8%