Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource' : <p>I am trying to get the same image to load into all of the canvas in my HTML. I had previously written my whole webpage in javascript but now I am learning angular and typescript.</p>

<p>I am getting this error highlighted in Visual Studio Code:</p>

<blockquote>
  <p>Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource'.
    Type 'HTMLElement' is missing the following properties from type 'HTMLVideoElement': height, msHorizontalMirror, msIsLayoutOptimalForPlayback, msIsStereo3D, and 80 more.ts(2345)</p>
</blockquote>

<p>But I get no error shown in the console. I can get the image to load on the HTML within the canvas (so it is working).</p>

<p>This is my ts:</p>

<pre><code>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    document.querySelectorAll("canvas").forEach(c=&gt;{
      var ctx = c.getContext("2d");
      var img = document.getElementById("P43");
      ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)
    });
  }

}
</code></pre>

<p>VS Code highlights the error on this line <code>ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)</code>, it highlights <strong>img</strong> and displays the error.</p>

<p>I have tried to search this but the only solutions I have found are for when you had the ID for tag ( I don't as it is all canvas' on the page.) or if there is an input.</p>

<p>Any help is appreciated.</p>
