CanvasRenderingContext2D: drawImage() method: takes natural height and width into account docs incomplete.

[sarojregmi200]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

What specific section or headline is this issue about?

Parameters section.

What information was incorrect, unhelpful, or incomplete?

The information is incomplete. In the Parameters section of the docs inside the image parameter.

"An element to draw into the context. The specification permits any canvas image source, specifically, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a VideoFrame."

What did you expect to see?

A note saying that the when HTMLImageElement, an SVGImageElement are used the naturalWidth and naturalHeight is taken into account not the height and width set by the browser.

Do you have any supporting links, references, or citations?

No, Need to do some research.

Do you have anything more you want to share?

I was stuck on a problem for 1/2 hrs while building a image cropper component. I don't know the actual reason why that is would love to research on it and submit a pr consisting the fix.

Steps to reproduce:

• Add a image with some higher resolution.
• Scale it down.
• Take the reference of that image and then render the image in the canvas.

What will you observe? You will see that the image appears to be of bigger size that the scaled down one. Which tripped me off, anyways I don't know why that behavior is and would love to research on the topic.

Note: If this issue breaks any rules or is not correct I am open for criticism and would love to know where I fell short.

[Josh-Cena]

@sarojregmi200 Could you give the code used to reproduce said issue? What's the width/height you are expecting and what's the real width/height?

[sarojregmi200]

I will respond with a Example in a sandbox as soon as possible.

[sarojregmi200]

Hey, @Josh-Cena sorry about the delay I completely forgot about it.

I have created a repo with the sample code and here is the live example of the above mentioned issue.

So, let me rephrase the above issue in a more understandable manner. In the documentation for the context api's drawImage method while using HTMLImageElement or any other DOM media element as it's source. It is not clearly specified that even if the source is a DOMElement reference the dimensions of the actual media source is taken into account.

Due to this missing piece of information I have found myself in 1-2 hrs of debugging state. So, as to save others from suffering the same I believe the documentation should be updated.