Javascript: drawImage is not taking whole picture

问题

Here's the code:

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, img.height, img.width, 0, 0, 100, 100);
};

Here's the picture:

I set it to get the whole image by setting img.height and img.width. But still I see that no whole picture is there, only part: bottom part is getting cut. How can I get it? Am I entering wrong value?

Refer here

回答1:

Arguments of function drawImage are
img - Specifies the image, canvas, or video element to use
sx - Optional. The x coordinate where to start clipping
sy - Optional. The y coordinate where to start clipping
swidth - Optional. The width of the clipped image
sheight - Optional. The height of the clipped imag
x - The x coordinate where to place the image on the canvas
y - The y coordinate where to place the image on the canvas
width - Optional. The width of the image to use (stretch or reduce the image)
height - Optional. The height of the image to use (stretch or reduce the image)
Correct use of your function will be

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);

来源：https://stackoverflow.com/questions/38384844/javascript-drawimage-is-not-taking-whole-picture