Why my canvas drawImage not showing up in angular2 component

Question

I am writing a canvas which draws an image in the component of angular2.

Here is the canvas.component.ts

export class BoardComponent implements  OnInit,  AfterViewInit, AfterViewChecked {

  @ViewChild("visualization") visualization: ElementRef;
  @ViewChild('img') img: ElementRef;

  private context: CanvasRenderingContext2D;
  private element: HTMLImageElement;

  src: string;
  width: number
  height: number

  constructor() {
    this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
  }

  ngOnInit() {
    this.width = 400;
    this.height = 400;
  }

  ngAfterViewInit() {
    this.context = this.visualization.nativeElement.getContext("2d");
    this.element = this.img.nativeElement;
  }

  ngAfterViewChecked() {
    this.context.clearRect(0, 0, this.width, this.height);
    console.log('drawImage');
    // this prints an image element with src I gave
    console.log(this.element);
    this.context.drawImage(this.element, 0, 0, this.width, this.height);
  }
}

and here is the template

<img #img src="{{src}}" style='display: none;' />
<canvas #visualization width="{{width}}" height="{{height}}"></canvas>`

it looks like the image has been loaded, but my canvas is still empty.

I have found many similar questions, but none of them use angular2.

for example, the answer from this one drawImage() not working is that you should wait until the image is loaded.

But I don't know how to check this situation in angular way.

Any suggestion?

thanks.

Edit

I found that maybe the reason is that the image is not loaded when I render it to the canvas.

I add the following code and resize my page, and the canvas does show up.

@HostListener('window:resize')
resize() {
    this.render();
  }
render() {
    this.context.clearRect(0, 0, this.width, this.height);
    this.context.drawImage(this.element, 0, 0, this.width, this.height);
 }

If this is the reason, the question changes, what is the proper way to add a event listener (like img.onLoad) to the html element in angular2?

Answer 1

Here I adapted your code to work.

HTML

  <img #img src="{{src}}" (load)="afterLoading()" style='display: none;' /> 
  <canvas #visualization width={{imgWidth}} height={{imgHeight}} "></canvas>

Typescript

export class BoardComponent implements  implements AfterViewInit {

  @ViewChild("visualization") visualization: ElementRef;
  @ViewChild('img') img: ElementRef;

  private context: CanvasRenderingContext2D;
  private element: HTMLImageElement;

  src: string;
  imgWidth: number;
  imgHeight: number;

  constructor() {
    this.imgWidth = 400;
    this.imgHeight = 400;
    this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
  }

  ngAfterViewInit() {
    this.context = this.visualization.nativeElement.getContext("2d");
    this.element = this.img.nativeElement;
  }


  afterLoading(){
    this.context.clearRect(0, 0, this.imgWidth, this.imgHeight);
    console.log('drawImage');
    // this prints an image element with src I gave
    console.log(this.element);
    this.context.drawImage(this.element, 0, 0, this.imgWidth, this.imgHeight);
  }
}

And here is the working DEMO