title: Dynamically generate multiple canvas area based on json provided
body: <p>I am using angular2 and html5 canvas. Based on json provided I want to create multiple divs with canvas area inside them.</p>
  
  <p>This is how generate my divs with canvas area (HTML CODE)</p>
  
  <pre><code>&lt;div class="masterpage" *ngFor="let x of masterPages" draggable [dragScope]="'masterpage'" [dragData]="x"&gt;
      &lt;canvas #myCanvas width="105" height="149" style="background:lightgray;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.ts code</p>
  
  <pre><code>ngAfterViewInit() {
      let canvas = this.myCanvas.nativeElement;
      this.context = canvas.getContext("2d");
      this.tick(this.masterPages);
  }
  
  tick(masterPages) {
      var ctx = this.context;
      ctx.clearRect(0, 0, 150, 150);
      for (let j = 0; j &lt; this.masterPages[this.count].areas.length; j++) {
          ctx.fillStyle = this.masterPages[this.count].areas[j].type;
          ctx.fillRect(masterPages[this.count].areas[j].x / 2, masterPages[this.count].areas[j].y / 2, masterPages[this.count].areas[j].width / 2, masterPages[this.count].areas[j].height / 2);
      }
      this.count = this.count + 1;
  }
  </code></pre>
  
  <p>below is my json </p>
  
  <pre><code>masterPages = [{
          areas: [
              {
                  type: "FlowArea",
                  width: "183.0",
                  x: "12.0",
                  y: "40.0",
                  id: "FAR.1",
                  height: "237.0"
              },
              {
                  type: "StaticArea",
                  width: "210.0",
                  x: "0.0",
                  y: "7.0",
                  id: "SAR.2",
                  height: "25.0"
              },
              {
                  type: "StaticArea",
                  width: "210.0",
                  x: "0.0",
                  y: "282.0",
                  id: "SAR.1",
                  height: "15.0"
              },
              {
                  type: "StaticArea",
                  width: "2.0",
                  x: "6.0",
                  y: "26.0",
                  id: "SAR.3",
                  height: "256.0"
              }
          ]
      },
      {
          areas: [
              {
                  type: "FlowArea",
                  width: "183.0",
                  x: "12.0",
                  y: "13.25",
                  id: "FAR.1",
                  height: "265.0"
              },
              {
                  type: "StaticArea",
                  width: "210.0",
                  x: "0.0",
                  y: "282.0",
                  id: "SAR.1",
                  height: "15.0"
              }
          ]
      }
      ];
  </code></pre>
  
  <p>according to json both canvas should have some shapes but in my case second canvas is coming empty</p>
  
  <p><img src="https://i.stack.imgur.com/nXrJD.png" alt=""></p>