Skip to content
This repository has been archived by the owner on Sep 29, 2022. It is now read-only.
/ Canvaz Public archive

Your favourite annual creative challenge for Hacktoberfest is here! We will once again be showcasing the creative talents of our ZTM students using the HTML <canvas> element.

License

Notifications You must be signed in to change notification settings

zero-to-mastery/Canvaz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Canvaz

Your favourite annual creative challenge for Hacktoberfest is here! We will once again be showcasing the creative talents of our ZTM students using the HTML <canvas> element.

If you've previously contributed to our projects like Canvas Creations, CSS Art or Animation Nation, this will be a piece of cake, and you can skip ahead to the rules for this particular project. If you've never done one of these before though, don't worry! This is a playground for developers of all skill levels and experience, so keep reading and you'll soon have everything you need to get started.

❇️ Getting Started with Hacktoberfest

Hacktoberfest is a month-long celebration of open source, organised by Digital Ocean. (More details here)

If you've never made a pull request before, or participated in an open-source project, we recommend taking a look at our Start Here Guidelines. This repo has everything you need to learn about open-source, with a step-by-step guide to making your very first PR. Once you've got your feet wet, you're ready to come back and dive into Hacktoberfest fun!

All discussions around this event can now be had in our #hacktoberfest-2021 channel on Discord!

❇️ Rules

  • Use HTML, CSS and vanilla JavaScript
  • Use the <canvas> element
  • Please make sure that the code is your own, and not copied from somewhere else
  • That's it!

❇️ But what is Canvas?

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw 2D shapes, graphs, combine photos, or create simple (and not so simple) animations.

For more information about Canvas, you can read its documentation, and do a tutorial!

❇️ How to contribute

  1. First up you need to fork (make a copy) of this repo to your Github account.

  2. Clone (download) your fork to your computer

  3. Set your streams so you can sync your clone with the original repo (get the latest updates)

    • git remote add upstream https://github.com/zero-to-mastery/Canvaz.git
    • git pull upstream master
    • The above 2 commands will synchronize your forked version of the project with the actual repository.
  4. Create a branch

  5. In the Art directory (folder), create a directory named after yourself.

  6. Within this folder you just made, create three files, an HTML file, a CSS file, and a JS file.

  7. Link your CSS and JS files to your HTML file.

  8. Using the <canvas> element, create a work of art! It can be as simple or as complex as you like!

  9. Grab a screenshot or gif of your final canvas art, ensuring that its nicely crop and preferably squared. Save this in your directory using icon.png as the name. If you don't add a gif/screenshot, the website won't show your work in the thumbnail.

  10. Next, create another file in your directory named meta.json, using the following template ensuring you replace the values for your own. This information will be used to automatically add your art to the gallery once your PR is merged.

{
    "art_name": "HacktoberFox",
    "author_name": "Matt",
    "author_github_url": "https://github.com/MattCSmith/"
}

Please keep src/art.js as it is. If you follow step 10 above, a script will add your art automatically after your PR is merged.

  1. Pull from the upstream again, like we did in step 3. This is to ensure we still have the latest code.

    • git pull upstream master
  2. Commit and push the code to your fork

  3. Create a pull request to have the changes merged from your fork into the origin

  4. Tweet about making your first Hacktoberfest pull request!

Congratulations! You are now one pull request closer to getting that free t-shirt. Why not have a go at the HTML challenge or the Python Challenge? You can check how many qualifying pull requests you have made at https://hacktoberfest.digitalocean.com/profile . Have Fun and Happy Coding!

❇️ Disclaimer

Zero To Mastery receives no commission or incentives for your participating in either this project or entering the Hacktoberfest event.

About

Your favourite annual creative challenge for Hacktoberfest is here! We will once again be showcasing the creative talents of our ZTM students using the HTML <canvas> element.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published