title: Angular 6 while I trying to render the same image on 2 separate canvas elements
body: <p>What I get is the image is rendered on the second canvas only
  but I want the same image to render on both canvases</p>
  
  <h2>This screenshot shows that the image is rendered only on the second canvas</h2>
  
  <p><a href="https://i.stack.imgur.com/u9PEG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u9PEG.jpg" alt="enter image description here"></a></p>
  
  <h2>HTML component</h2>
  
  <pre><code>&lt;div fxLayout="row" fxLayoutAlign="center center"&gt;
    &lt;canvas #canvas1 id="ctx1" width="500" height="500" style="border: 1px solid dodgerblue;"&gt;&lt;/canvas&gt;
    &lt;canvas #canvas2 id="ctx2" width="500" height="500" style="border: 1px solid #83ff1e;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Typescript component</h2>
  
  <pre><code>import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit, AfterViewInit {
  
    @ViewChild('canvas1') canvas1: ElementRef;
    @ViewChild('canvas2') canvas2: ElementRef;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    ngAfterViewInit() {
      this.init();
    }
  
    init() {
      const img = new Image();
      img.src = '../../../assets/img/lena_color.png';
  
      const width = 500;
      const height = 500;
  
      const canvas1: HTMLCanvasElement = this.canvas1.nativeElement;
      const ctx1: CanvasRenderingContext2D = canvas1.getContext('2d');
  
      const canvas2: HTMLCanvasElement = this.canvas2.nativeElement;
      const ctx2: CanvasRenderingContext2D = canvas2.getContext('2d');
  
      console.log(ctx1);
      console.log(ctx2);
  
  
      this.drawImage(ctx1, img);
      this.drawImage(ctx2, img);
  
    }
  
  
    drawImage(ctx, img) {
      img.onload = () =&gt; {
        ctx.drawImage(img, 0, 0);
      };
    }
  
  
  }
  </code></pre>
  
  <p>Any help is welcome.</p>