Pęknięcie HTML5 imageImage nieprawidłowy rozmiar obrazu

Question

Witam mam problem próbuję rysować obraz na płótnie z funkcją drawImage 50px x 50px na płótnie 50px x 50px, ale dostaję mniej niż potrzebuję.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var img = new Image(); 
 
img.onload = function() { 
 
    $("canvas").css("width", 50); 
 
    $("canvas").css("height", 50); 
 
    ctx.drawImage(img, 0, 0, 50, 50); //bad here why not drawing 50x50px image on the canvas?   
 
} 
 
img.src = 'http://www.w3schools.com/tags/planets.gif';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img src="http://www.w3schools.com/tags/planets.gif" width="100" height="100" style="position: absolute; top: 0px; left: 0px"> 
 
<canvas id="canvas" style="position: absolute; top: 0px; left: 120px; border: 1px solid #000"></canvas>

Answer 1

Nie ustawić szerokość płótna i wysokość poprzez CSS. Spowoduje to rozciągnięcie/ściśnięcie rzeczywistego płótna, skalowanie zawartości.

Użyj tych starych HTML width i height atrybutów zamiast:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var img = new Image(); 
 
img.onload = function() { 
 
    ctx.drawImage(img, 0, 0, 50, 50); 
 
} 
 
img.src = 'http://www.w3schools.com/tags/planets.gif';

<img src="http://www.w3schools.com/tags/planets.gif" width="100" height="100" style="position: absolute; top: 0px; left: 0px"> 
 
<canvas 
 
    id="canvas" 
 
    style="position: absolute; top: 0px; left: 120px; border: 1px solid #000" 
 
    width="50" 
 
    height="50"> 
 
</canvas>

Te atrybuty rzeczywiście zmienić szerokość płótna za kontekst i wysokość, w wyniku czego obraz, który jest dokładnie rozmiar można oczekiwać, że być.