CirclesInCanvas

import { Component, ElementRef, Input, ViewChild  } from '@angular/core';

@Component({
  selector: 'contacts-list',
  template: require('./rack-details.component.html')
})
export class RackDetailsComponent {
  public radius:number =  20;
  public circleBorder:number =  0.5;
  public cols:number =  15;
  public rows: number = 3;
  public distanceBetweenCircles: number = 10;
    @ViewChild('canvas') canvasRef:ElementRef;
    private canvas: any;
  
    constructor() {
    }

    ngOnInit() {
    }

    ngAfterViewInit() {
        this.canvas = this.canvasRef.nativeElement;
        this.draw();
    }

    draw() {
        if (this.canvas.getContext) {
           let c = this.canvas.getContext('2d');

            c.fillStyle = "#fefefe";
             for (var i = 0; i < this.rows; i++) {
              for (var j = 0; j < this.cols; j++) {

                  var offset = this.radius * 2 + this.circleBorder + this.distanceBetweenCircles;
                  var center = this.radius + this.circleBorder;
                  var x = j * offset + center;
                  var y = i * offset + center;
                  c.beginPath();
                  c.arc(x, y, this.radius, 0, 2 * Math.PI, false);
                  c.fillStyle = '#E6E6E6';
                  c.fill();
                  c.lineWidth = this.circleBorder;
                  c.strokeStyle = '#CCCCCC';
                  c.stroke();
                            }
            
        }
    }
}
}



<div class="row rack-row">
                                <div class="col-md-12">
                                    <canvas #canvas></canvas>
                                </div>
                            </div>