HTML Code

 

Add canvas element inside wrapper div. Add responsive-canvas class to canvas and canvas-wrapper class to div.

<div class="col-md-12 canvas-wrapper">
 <canvas class="responsive-canvas" #canvas></canvas>                       
</div>

 

Component Code

Add below code to create reference object of canvas;

  canvas: ElementRef;
  
  @ViewChild('canvas') set content(content: ElementRef) {
    if (content) {
      this.canvas = content;
      }
  }

Add below host listener to update canvas width on screen resize. 

 @HostListener('window:resize', ['$event'])
  onResize() {
    this.ResizeCanvas();
  }

 

On screen resize update canvas width with the width of wrapper div 

ResizeCanvas() { 
      $(".responsive-canvas")[0].width = $(".canvas-wrapper")[0].offsetWidth;  
  }

 

To update canvas width on initial load add below code

 ngOnInit(): void {
    this.ResizeCanvas();
}