Add padding feature to pencil and shape tool to codebadge project

### **What you will need to know?**
HTML, CSS and JavaScript

### **Add padding feature to pencil and shape tool to codebadge project**
You need to add a padding feature to pencil and shape tool to our codebadge illustrator. If the task of integration of shape and pencil tool task is completed, you can work on this task.

### **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 mentioned task is done you can proceed with this task.
- You need to draw shapes with padding on click. You can use vanilla javascript or [p5.js]() for doing this.
- You need to take input of padding from the user.
- padding shall work at onchange event rather than load.

### **Expected Outcome**
At the route /newbadge, the padding with shape and pencil tool must be added which can be available for various colour fills with user input padding.

### **Resources & References (Where to Start)**
You can go through [HTML Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) and edit its code. You can refer this website for sample [The Marauders Canvas](http://the-marauders-canvas.herokuapp.com/). Commit your code on [Codebadge development branch](https://github.com/codeuino/Codebadge).You can go through [HTML Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) and edit its code. Refer this for the [sample code](https://github.com/ayushnagar123/draw/tree/master).

### **Extras**
Just follow the readme whenever you are stuck. Visit [Codeuino's Website](https://discord.gg/CNStUqX) in case of any doubts.