Как холст управление соотношением изображений

Question

Все:

Интересно, если я нарисовать изображение на холсте, если соотношение изображения не соответствует холсту, как делает холст масштабировать (допустят только ширину и высоту набора на холсте)?

Например:

<canvas id="myCanvas" style="width:200px; height:200px;"></canvas> 
<script> 
    var canvas = d3.select("#myCanvas").node(); 
    var context = canvas.getContext("2d"); 

    var img = new Image(); 

    img.onload = function(){ 
     console.log(img.naturalWidth, img.naturalHeight); 
     context.drawImage(img, 0, 0); 
    } 

    img.src = "https://www.google.com/images/srpr/logo11w.png"; 
</script> 

В результате кажется, что изображение было растянуть немного вертикально и сжать по горизонтали, я хочу знать, почему холст дело это таким образом, и как сделать это, как это или масштаб в его соотношении, как?

Я также попытался дать ширину и высоту, сделать изображение, но все еще кажется, не совсем правильно, например:

// in this way, the image still get stretched and squeeze 
<script> 
    var canvas = d3.select("#myCanvas").node(); 
    var context = canvas.getContext("2d"); 

    var img = new Image(); 

    img.onload = function(){ 
     console.log(img.naturalWidth, img.naturalHeight); 
     context.drawImage(img, 0, 0, img.naturalWidth/5, img.naturalHeight/5); 
    } 

    img.src = "https://www.google.com/images/srpr/logo11w.png"; 
</script> 

ИЛИ

// Even I give it a 100 by 100 size, it can not do it that way 
<script> 
    var canvas = d3.select("#myCanvas").node(); 
    var context = canvas.getContext("2d"); 

    var img = new Image(); 

    img.onload = function(){ 
     console.log(img.naturalWidth, img.naturalHeight); 
     context.drawImage(img, 0, 0, 100, 100); 
    } 

    img.src = "https://www.google.com/images/srpr/logo11w.png"; 
</script> 

Благодаря

Answer 1

Растровое из холст по умолчанию 300x150 независимо от размера CSS.

<canvas id="myCanvas" style="width:200px; height:200px;"></canvas> 

Это растянутое нарисованное на растровое изображение 300x150 значение 200x200.

Используйте холст атрибуты (или свойства из JavaScript), чтобы установить размер правильно:

<canvas id="myCanvas" width=200 height=200></canvas>