Javascript: drawImage nimmt nicht ganze Bild

Question

Hier ist der 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); 
}; 

Hier ist das Bild:

ich es einstellen das ganze Bild zu erhalten, indem img.height und img Einstellung .Breite. Aber trotzdem sehe ich, dass kein ganzes Bild da ist, nur ein Teil: der untere Teil wird geschnitten. Wie kann ich es bekommen? Gib ich einen falschen Wert ein?

Refer here

Answer 1

Argumente der Funktion drawImage sind
img - Gibt das Bild, Leinwand oder Videoelement
sx verwenden - Optional. Die x-Koordinate, an der die Beschneidung beginnt
sy - Optional. Die y-Koordinate, an der die Beschneidung beginnt
swidth - Optional. Die Breite des abgeschnittenen Bildes
Sheight - Optional. Die Höhe des clipped imag
x - Das x-Koordinate, wo auf der Leinwand, um das Bild zu platzieren
y - Die y-Koordinate, wo auf der Leinwand, um das Bild zu platzieren
Breite - Optional. Die Breite des zu verwendenden Bildes (dehnen oder verkleinern Sie das Bild)
Höhe - Optional. Die Höhe des Bildes zu verwenden (Dehnung oder reduzieren Sie das Bild)
korrekte Verwendung Ihrer Funktion

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