HTML5: Leinwand und Bildgröße

Question

Ich möchte ein Bild auf Leinwand mit JS zeichnen. Das ist mein HTML-Code:

<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas> 

Das ist mein js-Code ist:

var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img, 0, 0,1000,600) 
    } 
    img.src = someUrlToJpgImage; 

Dies ist der Ursprung JPG-Bild (1000x600), die auf dem Server befindet:

Dies ist das Ergebnis (1000x600) sehe ich im Browser:

Wie Sie sehen Dies ist die obere linke Ecke des Bildes, aber nicht das gesamte Bild wie erwartet skaliert. Ich habe versucht, zu Js-Code hinzuzufügen:

ctx.imageSmoothingEnabled = false; 
ctx.webkitImageSmoothingEnabled = false; 
ctx.mozImageSmoothingEnabled = false; 

aber es hat nicht geholfen.

Wie löst man dieses Problem?

Answer 1

Sie sollten die Anzahl der Pixel auf dem Canvas-Element gewünscht eingestellt:

<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>