title: angular2 drawImage on canvas after change detetion
body: <p>I have an angular2 component:</p>
  
  <pre><code>@Component({
      selector: 'my-image',
      template: `
      &lt;img #img src="{{src}}" style='display: none;' /&gt;
      &lt;canvas #canvas width="{{width}}" height="{{height}}"&gt;&lt;/canvas&gt;`
  })
  export class ImageComponent implements AfterViewInit {
      @ViewChild('canvas') canvas: ElementRef;
      @ViewChild('img') img: ElementRef;
  
      private ctx: CanvasRenderingContext2D;
      private element: HTMLImageElement;
      src: string;
      width: number;
      height: number;
  
      constructor(canvas: ElementRef, img: ElementRef) {
          this.width = window.innerWidth;
          this.height = window.innerHeight;
          this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
      }
      ngAfterViewInit() {
          this.ctx = this.canvas.nativeElement.getContext('2d');
          this.element = this.img.nativeElement;
      }
      @HostListener('window:resize')
      resize() {
          this.width = window.innerWidth;
          this.height = window.innerHeight;
          this.render();
      }
      clear() {
          this.ctx.clearRect(0, 0, this.width, this.height);
      }
      render() {
          this.clear();
          this.ctx.drawImage(this.element, 0, 0, 400, 400);
      }
  }
  </code></pre>
  
  <p>So everything works great, however, when i resize the window, the resize callback get hit and calls render.  Then the binding on the canvas happens which resets the context and im left with a blank canvas.  My initial thought was to call render again after the change detection occurred.  Is that the right approach or is there a better way?</p>
  
  <p>Thanks</p>