Cannot draw image via canvas context.drawImage

[NekR]

2345 Argument of type 'HTMLImageElement' is not assignable to parameter of type 'HTMLVideoElement'.
  Property 'msHorizontalMirror' is missing in type 'HTMLImageElement'.

drawImage call:

context.drawImage(
  image,

  sliceLeft, sliceTop,
  sliceWidth, sliceHeight,

  drawLeft, drawTop,
  drawWidth, drawHeight
);

[RyanCavanaugh]

This code compiles. Can you post more details?

// What I'm guessing your variables are?
var sliceLeft = 0, sliceTop = 0, sliceWidth = 0, sliceHeight = 0;
var drawLeft = 0, drawTop = 0, drawWidth = 0, drawHeight = 0;
var context: CanvasRenderingContext2D;
var image: HTMLImageElement;

context.drawImage(
  image,

  sliceLeft, sliceTop,
  sliceWidth, sliceHeight,

  drawLeft, drawTop,
  drawWidth, drawHeight
);

[NekR]

@RyanCavanaugh

Yep, you are right, there is something else behind this error. It seems what this error occurse when not all arguments (expect image of course) are numbers. For example do this:

let sliceWidth = '';
let sliceHeight = '';

And you will get same error as I got. I know it's wrong to pass string there and that was a bug in my code because I forgot to cast it to number after .toFixed(), but error message is not informative for this situation.

[RyanCavanaugh]

This happens because of how we do overload resolution:

1. For each overload, try to assign the argument types to the parameter types
2. As soon as you find one that works, stop
3. If none of them work, repeat step 1 on the first overload and report the error that stopped you from succeeding

The first overload to drawImage is the one that takes a HTMLVideoElement, which is not assignable from image, so that's the error report.

We just don't have any way of knowing which overload you were trying to call:

declare function f(x: string, y: boolean);
declare function f(x: number, y: string);

// Is the problem that x is a number, or that y is a boolean?
f(32, true);
// Is the problem that x is a string, or that y is a string?
f('foo', 'foo');

In this particular case it's more obviously bad because the parameters only differ on that first argument; the ideal type of drawImage would type its first argument as HTMLImageElement|HTMLVideoElement|HTMLCanvasElement.

We should run some kind of tool over lib.d.ts to detect and fix up these cases so the error messages are more useful.

[ekalaya]

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
at handlePathRoot (leaflet-image.js:133)
at pop (leaflet-image.js:201)
at leaflet-image.js:215
at tileQueueFinish (leaflet-image.js:116)
at notify (leaflet-image.js:223)
at leaflet-image.js:216
at Image.im.onload (leaflet-image.js:105)

[hetsit]

Hello, I'm getting this error, so please help me,
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

[AmShubhangi]

ror): Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

[anilsamelia]

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

please help me

[seetpalsingh]

Hi,

i couldn't understand that fixed this issue in this post.

can anyone help me on this?

i am using this setup in vuejs 3

const startup = () => {
  // const videos: any = document.getElementById('video')
  // const canvas: HTMLElement | null = document.getElementById('canvas')
  const photo: HTMLElement = document.createElement('img')
  // const startbutton: any = document.getElementById('startbutton')

  navigator.mediaDevices
    .getUserMedia({
      video: true,
      audio: false
    })
    .then(function (stream) {
      videos.value.srcObject = stream
      videos.value.play()
    })
    .catch(function (err) {
      console.log('An error occurred: ' + err)
    })

  // clearphoto()
}

const canBePlayed = () => {
  if (!streaming) {
    height = 4 / (6 / width)

    if (isNaN(height)) {
      height = width / (4 / 3)
    }

    streaming = true
  }
}

const takepicture = () => {
  // const canvas: any = document.getElementById('canvas')
  const canvas: HTMLCanvasElement = document.createElement('canvas')
  // const output: HTMLElement | null = document.getElementById('output')
  const context: any = canvas.getContext('2d')

  console.log(typeof context)

  const img = new Image()
  // img.onload = function () {
  context.drawImage(videos, 0, 0, 200, 200)
  // }
  img.src = canvas.toDataURL('image/png')
  img.width = 240
  img.height = 240

  // const takeAPic2: any = document.getElementById('takeAPic')

  takeAPic.value.innerHTML = ''
  takeAPic.value.appendChild(img)
  // takeAPic.value = img
}