title: Angular 5 with Canvas drawImage not showing up
body: <p>Trying to add a background image to canvas using drawImage and it's not showing up.  I know the path to the image is correct because I can do <code>&lt;img src="{{ imageName }}" /&gt;</code> and that works.  Everything else works fine in JavaScript but doesn't translate well to Angular.  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas #canvas&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  ...
  
  @Component({
    selector: 'app-box-picker',
    templateUrl: './box-picker.component.html',
    styleUrls: ['./box-picker.component.css']
  })
  export class BoxPickerComponent implements OnInit {
    @ViewChild('canvas') public canvas: ElementRef;
  
    canvasEl: any;
    ctx: CanvasRenderingContext2D;
  
    @Input() public width = 535.0;
    @Input() public height = 669.25;
  
    mousePosition: any;
    isMouseDown: boolean;
    dragoffx: number;
    dragoffy: number;
  
    circles: any;
  
    imageObj = new Image();
    imageName = "../../assets/pdf.png";
  
    constructor() {
    }
  
    ngOnInit() {
  
    }
  
    public ngAfterViewInit() {
      this.canvasEl = this.canvas.nativeElement;
      this.ctx = this.canvasEl.getContext('2d');
  
      this.canvasEl.width = this.width;
      this.canvasEl.height = this.height;
  
      this.imageObj.src = this.imageName;
      console.log(this.imageName);
      console.log(this.imageObj);
      // init circles
      var c1 = new Circle();
      c1.init(50, 50, 15, "rgba(217,83,79, .5)", "black", this.ctx);
      // console.log(c1);
      c1.out();
  
      this.circles = [c1];
  
      this.draw();
  
      this.captureDownEvents(this.canvasEl);
      this.captureMoveEvents(this.canvasEl);
      this.captureUpEvents(this.canvasEl);
    }
  
    draw() {
      //clear canvas
      this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
      this.ctx.drawImage(this.imageObj, 0, 0, this.canvasEl.width, this.canvasEl.height);
      this.drawCircles();
    }
  
    drawCircles() {
      for (var i = this.circles.length - 1; i &gt;= 0; i--) {
        this.circles[i].draw();
      }
    }
  ...
  }
  </code></pre>
  
  <p>When I do a <code>console.log(this.imageObj);</code> sometimes I get <code>&lt;img src="../../assets/pdf.png"&gt;</code> and other times I get only <code>&lt;img&gt;</code>.  Does that have anything to do with it? </p>