HTML5 canvas drawImage hình ảnh không chính xác kích thước

Question

Xin chào tôi có vấn đề tôi cố gắng vẽ hình ảnh trên canvas với drawImage chức năng 50px x 50px trên canvas 50px x 50px, nhưng tôi nhận được nhỏ hơn tôi cần.

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

Đừng đặt chiều rộng và chiều cao của vải thông qua CSS. Điều này sẽ kéo dài/nén canvas thực tế, mở rộng nội dung.

Sử dụng những HTML cũ width và height thuộc tính thay vì:

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>

Những thuộc tính này thực sự thay đổi width và height bối cảnh của của vải, kết quả là một hình ảnh đó là chính xác kích thước mà bạn mong đợi nó được.