import { Component , ElementRef , HostListener , Input , OnInit , ViewChild } from '@angular/core' ; import { RendererService } from './renderer.service' ; @ Component ( { selector : 'atft-renderer-canvas' , templateUrl : './renderer-canvas.component.html' , styleUrls : [ './renderer-canvas.component.scss' ] } ) export class RendererCanvasComponent implements OnInit { @ ViewChild ( 'canvas' , { static : true } ) private canvasRef : ElementRef ; @ Input ( ) preserveDrawingBuffer = false ; constructor ( private rendererService ) { this . onResize = this . onResize . bind ( this ) ; } ngOnInit ( ) { this . rendererService . initialize ( this . canvas , this . preserveDrawingBuffer ) ; this . resetCanvas ( ) ; } example public get renderPane ( ) : ElementRef { return this . canvasRef ; } private get canvas ( ) : HTMLCanvasElement { return this . canvasRef . nativeElement ; } @ HostListener ( 'window:resize' , [ '$event' ] ) public onResize ( event ) { this . resetCanvas ( ) ; } protected resetCanvas ( ) { this . rendererService . resize ( this . canvas , '100px' ) ; this . rendererService . resize ( this . canvas , '100%' ) ; } }