Answer a question

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.

I am getting this error highlighted in Visual Studio Code:

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)

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).

This is my ts:

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=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("P43");
      ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)
    });
  }

}

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

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.

Any help is appreciated.

Answers

You have to tell the compiler that the img variable is being set as an HTMLImageElement.

The ctx.drawImage method expects a :

HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;

If your P43 is a canvas you have to do:

const img = document.getElementById("P43") as HTMLCanvasElement;

if it's an image element:

const img = document.getElementById("P43") as HTMLImageElement;

It would be even better to actually check that the element is in fact the right type of Element. You can do this with instanceof. The TypeScript compiler will also pick up the if statement, and inside the if statement the img variable will be a HTMLCanvasElement for the compiler, so explicit casting is no longer necessary:

const img = document.getElementById("P43");

if (img instanceof HTMLImageElement) {
  ctx.drawImage(img,0,0,106,50);
} else {
  // wrong element!
}