Skip to content

Add shape tool to codebadge project #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ayushnagar123 opened this issue Dec 15, 2019 · 0 comments
Closed

Add shape tool to codebadge project #31

ayushnagar123 opened this issue Dec 15, 2019 · 0 comments

Comments

@ayushnagar123
Copy link
Member

ayushnagar123 commented Dec 15, 2019

What you will need to know?

HTML, CSS and JavaScript

Add shape tool to codebadge project

You need to add a shape tool to out codebadge illustrator. If the task of integration of HTML Canvas is completed, you can work on this task.

Expected Outcome

At the route /newbadge, the shape tool must be added which can be available for various colour fills.
Shapes expected:-

  1. rectangle
  2. eclipse
  3. round corner rectangles.

Step by step

  • Setup Codebadge project by following installation steps in the readme.
  • Check if canvas task is completed or not. If not first proceed with canvas task.
  • Once canvas task is done you can proceed with this task.
  • You need to draw shapes on click. You can use vanilla javascript or p5.js for doing this.
  • You need to take input of width and height for rectangle and eclipse.
  • width and height shall work at on change event rather than load.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch.You can go through HTML Canvas tutorial and edit its code. Refer this for the sample code.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant