angular2 drawImage on canvas after change detetion
<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>