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.

首先按照 README 中的设置步骤操作，并检查 /newbadge 路由以及 canvas、shape 和 pencil 工具的工作状态。阅读 HTML Canvas 教程和现有的绘图实现，然后确定 padding input 应如何在 change 时而不是 load 时更新。在 /newbadge 中，用户能够输入 padding，并使用不同的填充绘制带 padding 的 shape 和 pencil 笔迹，即表示完成。

由索引模型根据 Issue 内容生成。