Create a new route in codebadge project for new badge creation. The route shall be directed to a new page which shall have an HTML Canvas integrated where the user can create their badges. This canvas must be centrally aligned and must be white.
Steps by step
install codebadge project. by following steps:-
1. clone the repository
2. in the folder, run npm install to set up the repository and then npm run serve to run the code,
once you have installed, create a new view in the view folder with name newBadge
create a new file newBadge.vue.
integrate canvas. To will need to add script tag and change dom properties of canvas such as context, height and width.
Expected Outcome
The route /newBadge shall be made and must have an HTML canvas integrated. for example, you can see the screenshot provided in the GitHub issue above.
What you will need to know?
Basics of HTML Canvas, CSS.
Integrate HTML canvas for illustrator environment
Create a new route in codebadge project for new badge creation. The route shall be directed to a new page which shall have an HTML Canvas integrated where the user can create their badges. This canvas must be centrally aligned and must be white.
Steps by step
Expected Outcome
The route /newBadge shall be made and must have an HTML canvas integrated. for example, you can see the screenshot provided in the GitHub issue above.
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. Refer sample drawing app made in simple HTML, css and javascript for help.
Extras
Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.