added margin as parameter

src/app/app.component.html

@@ -7,7 +7,16 @@
   <li><pre>{{canvasParam | json}}</pre></li>
 
   <li>
-    <div><input type="number" [(ngModel)]="canvasParam.points"></div>
+    <label>
+      <div>Amount of points</div>
+      <input type="number" [(ngModel)]="canvasParam.points">
+    </label>
+  </li>
+  <li>
+    <label>
+      <div>Margin</div>
+      <input type="number" [(ngModel)]="canvasParam.margin">
+    </label>
   </li>
 </ul>
 

src/app/app.component.ts

@@ -20,9 +20,9 @@ export class AppComponent {
         start: '#cc0045',
         end: '#0067cc'
       },
-      points: 3
+      points: 3,
+      margin: 0.1
     };
-    this.test = 1;
   }
 
   public updateCanvasConfig(config): void {

src/app/canvas/canvas.directive.ts

@@ -163,16 +163,18 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   private updateConfig(): void {
+    const margin = this.canvas.clientWidth * this.param.margin;
+
     this.config = {
       width: this.canvas.clientWidth,
       height: this.canvas.clientHeight,
       start: {
-        x: this.canvas.clientWidth,
+        x: this.canvas.clientWidth - margin,
         y: 0,
         color: this.param.colors.start
       },
       end: {
-        x: 0,
+        x: 0 + margin,
         y: this.canvas.clientHeight,
         color: this.param.colors.end
       },

src/app/models/param.model.ts

@@ -4,4 +4,5 @@ export interface Param {
     end: string
   };
   points: number;
+  margin: number;
 }