Angular 6 пока я пытаюсь отрисовать одно и то же изображение на 2 отдельных элементах canvas

Question

Что я получаю, так это то, что изображение отображается только на втором холсте но я хочу, чтобы одно и то же изображение отображалось на обоих полотнах

Этот снимок экрана показывает, что изображение отображается только на втором холсте

HTML-компонент

<div fxLayout="row" fxLayoutAlign="center center">
  <canvas #canvas1 id="ctx1" width="500" height="500" style="border: 1px solid dodgerblue;"></canvas>
  <canvas #canvas2 id="ctx2" width="500" height="500" style="border: 1px solid #83ff1e;"></canvas>
</div>

Компонент машинописи

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 = () => {
      ctx.drawImage(img, 0, 0);
    };
  }


}

Любая помощь приветствуется.

Answer 1

Определите два Image объекта вместо повторного использования одного и того же.