HTML5 canvas drawImage неправильный размер изображения

Question

Привет, у меня проблема. Я пытаюсь рисовать изображение на холсте с помощью функции 0x50px x 50px на холсте 50px x 50px, но я получаю меньше, чем мне нужно.

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

Не устанавливайте ширину и высоту брезентовой через CSS. Это растягивает/сжимает фактический холст, масштабируя содержимое.

Используйте те старые HTML width и height атрибуты вместо:

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>

Эти атрибуты реально изменить ширину и высоту контекста холста, в результате чего изображение, которое именно размер вы ожидаете его быть.