Argument of type 'ImageBitmap' is not assignable to parameter of type 'HTMLCanvasElement | HTMLImageElement | HTMLVideoElement'

[jtenner]

Hello! I am a very huge fan of typescript, and I'm sure adding ImageBitmap to the d.ts file responsible for canvas definitions should work.

Just to be clear, MDN lists the following things for CanvasRenderingContext2D.protortype.createPattern

A CanvasImageSource to be used as the image to repeat. It can be an:

- HTMLImageElement (<img>)
- HTMLVideoElement (<video>, by using the capture of the video)
- HTMLCanvasElement (<canvas>)
- CanvasRenderingContext2D
- ImageBitmap
- ImageData
- Blob

TypeScript Version: 2.9.2

Search Terms: Canvas. ImageBitmap, createPattern

Code

const image = await createImageBitmap(blob);
const pattern = ctx.createPattern(image);

Expected behavior:

Well I expect typescript to not report this as a problem.

Actual behavior:

Currently reported like this in my IDE.

Argument of type 'ImageBitmap' is not assignable to parameter of type 'HTMLCanvasElement | HTMLImageElement | HTMLVideoElement'.
  Type 'ImageBitmap' is not assignable to type 'HTMLVideoElement'.
    Property 'msHorizontalMirror' is missing in type 'ImageBitmap'.

Playground Link:
http://www.typescriptlang.org/play/#src=%0D%0Afetch("path%2Fto%2Fimg.png")%0D%0A%20%20%20%20.then(e%20%3D>%20e.blob())%0D%0A%20%20%20%20.then(e%20%3D>%20createImageBitmap(e))%0D%0A%20%20%20%20.then(e%20%3D>%20document.createElement("canvas")%0D%0A%20%20%20%20%20%20%20%20.getContext("2d")%0D%0A%20%20%20%20%20%20%20%20.createPattern(e%2C%20"repeat-x"))%3B%0D%0A%0D%0A

Related Issues: There are a few issues that involve definitions, not sure where to put this.

[jtenner]

Can I fork TypeScript and change this line?
https://github.com/Microsoft/TypeScript/blob/02547fe664a1b5d1f07ea459f054c34e356d3746/src/lib/dom.generated.d.ts#L1786

It's my understanding that this is a generated file, so my guess is probably "no."

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[jtenner]

@mhegazy I think I'm confused as to how to fix these files.

What's interesting is that this file notes createPattern has a parameter of CanvasImageSource. The createPattern definition is here.

https://github.com/Microsoft/TSJS-lib-generator/blob/master/inputfiles/idl/HTML%20-%20Canvas.widl#L96

  CanvasPattern? createPattern(CanvasImageSource image, [TreatNullAs=EmptyString] DOMString repetition);

However, it's properly defined here:

https://github.com/Microsoft/TSJS-lib-generator/blob/master/inputfiles/idl/HTML%20-%20Canvas.widl#L21

typedef (HTMLOrSVGImageElement or
         HTMLVideoElement or
         HTMLCanvasElement or
         ImageBitmap or
         OffscreenCanvas) CanvasImageSource;

I am unsure how to make the proper change to these files. Any ideas?

[mhegazy]

Looks like it is already fixed in https://github.com/Microsoft/TSJS-lib-generator. We port these regularly. so it should be in an upcoming TS release.

[jtenner]

Thank you!

In the meantime, my IDE still barks at me over this function. Looks like I'll have to just wait for the files to update.

Cheers.