title: An Angular-2 Project Using Inheritance and Canvas
body: <p>I got a midterm project.
  In this project, Angular-2 will be used.
  They want me to do the following program:
  Program will draw a circle, a square and a rectangle in the canvas.
  They will take place with 3 buttons.
  The geometric shape that will be occur when the button is clicked will be located to the right of the previous one.
  Also the newly created area of the shape will be printed in a list when the button is every clicked.
  The classes are:
  baseClass: Polygon,
  subClasses: Draw_Circle, Draw_Square, Draw_Rectangle
  I could calculate areas. But I can not print the list on the screen.
  I could move on here.
  I got stuck at this point.
  I am new to Angular-2.
  What are your recommendations?
  How do I proceed?
  I am happy to help you.</p>
  
  <p>My code is below:</p>
  
  <pre><code>  Canvas.ts
  
    import { Component, NgZone } from '@angular/core';
     import { DomSanitizationService } from '@angular/platform-browser';
     import { bootstrap } from '@angular/platform-browser-dynamic';
     @Component({
  selector: 'Canvas_component',
  templateUrl: 'WebSite/Components/CanvasComponent/Canvas.html',
  styleUrls: ['WebSite/Components/CanvasComponent/Canvas.css']
  })
  
  export class CanvasComponent {
  ctx: CanvasRenderingContext2D;
  mainCanvas: HTMLCanvasElement;
  public AreaList: Polygon[] = [];
  constructor() { }
  move: number = 0;
  rect: Draw_Rectangle = new Draw_Rectangle();
  circ: Draw_Circle = new Draw_Circle();
  squ: Draw_Square = new Draw_Square();
  
  public PolygonAreaList() {
      var c: Caller = new Caller();
      c.CallArea(this.circ);
      c.CallArea(this.squ);
      c.CallArea(this.rect);
      var shapeCrc: Draw_Circle = new Draw_Circle();
      var shapeSq: Draw_Square = new Draw_Square();
      var shapeRect: Draw_Rectangle = new Draw_Rectangle();
      shapeCrc.Draw();
      shapeSq.Draw();
      shapeRect.Draw();
    }
  
   }
   export class Polygon{
   ctx: CanvasRenderingContext2D;
   mainCanvas: HTMLCanvasElement;
   public shift: number = 0;
  
  public Edge1: number = 0;
  public Edge2: number = 0;
  result: number;
  
  constructor(edge1: number, edge2: number) {     
      this.Edge1 = edge1;
      this.Edge2 = edge2;
   }
   public Area(): number { return 0; }
   public Draw(): void { }
  }
  class Draw_Circle extends Polygon {
  
  constructor(radius = (Math.floor(Math.random() * 10) + 5)) {
      super(radius, radius);
  }
  public Area(): number {
      this.result = 3 * this.Edge1 * this.Edge1;
  
      return this.result;
  
  }
  
  public Draw(): void {
  
      this.mainCanvas = 
   &lt;HTMLCanvasElement&gt;document.getElementById('myCanvas');
      this.ctx = this.mainCanvas.getContext("2d");
  
      this.ctx.beginPath();
  
      this.ctx.arc(20 + this.Edge1, 15, this.Edge1, 0, 2 * Math.PI);
      this.ctx.stroke();
     }
    }
    class Draw_Square extends Polygon  {
    constructor(side = (Math.floor(Math.random() * 10) + 5)) {
      super(side, side);
  }
  public Area(): number {
      this.result = this.Edge1 * this.Edge1;
      return this.result;
  }
  public Draw() {
      this.mainCanvas = &lt;HTMLCanvasElement&gt;document.getElementById('myCanvas');
      this.ctx = this.mainCanvas.getContext("2d");
      this.shift += 40;
      this.ctx.beginPath();
      this.ctx.rect(40 + this.Edge1, 15, this.Edge1, this.Edge1);
      this.ctx.stroke();
     }
  }
   class Draw_Rectangle extends Polygon {
    constructor(side1 = (Math.floor(Math.random() * 10) + 5), side2 = (Math.floor(Math.random() * 10) + 5)) {
      super(side1, side2);
     }
     public Area(): number {
      this.result = this.Edge1 * this.Edge2;
      return this.result;
     }
     public Draw() {
      this.mainCanvas = &lt;HTMLCanvasElement&gt;document.getElementById('myCanvas');
      this.ctx = this.mainCanvas.getContext("2d");
      this.shift += 40;
      this.ctx.beginPath();
      this.ctx.rect(80 + this.Edge2, 15, this.Edge1, this.Edge2);
      this.ctx.stroke();
   }
   }
  
   class Caller {
  public arr: number[] = [];
  public circle: number = 0;
  public square: number = 0;
  public rectangle: number = 0;
  public CallArea(sh: Polygon): void
      {
      var a: number;
      var arr: number[] = [];
      a = sh.Area();
      arr.push(a);
  
  
   }
     }
  
  
  Canvas.html
  
  
    &lt;div&gt;
         &lt;canvas id="myCanvas" class="myCanvas_class"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;div class="info_div_class"&gt;
       &lt;button (click)="PolygonAreaList()"&gt;Draw Circle&lt;/button&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;div *ngFor="let lst of arr"&gt;
      &lt;ul&gt;
          &lt;li&gt;{{lst}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;
   &lt;p&gt;&lt;/p&gt;
  &lt;div class="info_div2_class"&gt;
  &lt;button (click)="Click()"&gt;Draw Square&lt;/button&gt;
  &lt;/div&gt;
   &lt;p&gt;&lt;/p&gt;
   &lt;p&gt;&lt;/p&gt;
   &lt;div class="info_div3_class"&gt;
  &lt;button (click)="Click()"&gt;Draw Rectangle&lt;/button&gt;
  &lt;/div&gt;
  
  
   Canvas.css
  
   .myCanvas_class{
   background-color:lightgray;
   width:100%;
   height:60%;
   }
   .info_div_class{
   float: left;
   background-color: darkcyan;
   height: 20%;
   width: 33%;
   text-align:center;
   }
   .info_div2_class{
   float: left;
   background-color: darkcyan;
   height: 20%;
   width: 33%;
   text-align:center;
  }
  .info_div3_class{
   float: left;
   background-color: darkcyan;
   height: 20%;
   width: 33%;
   text-align:center;
   }
  </code></pre>