JavaScript Canvas drawImage искажает мое изображение

Question

Что бы я ни пытался, я не могу понять, почему drawImage вертикально растягивает картинку. Вот код:

<canvas id="canvas" style="padding:0;border:0;margin:0 auto;
width:320px;height:456px;z-index:0;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var d = new Image
d.src = './images/portadilla.jpg';
d.onload = function a(){context.drawImage(d, 0, 0);}
</script>

Мое изображение имеет высоту 456 пикселей и ширину 320 пикселей, так же как и холст. Я пытался использовать разные изображения и форматы, но проблема остается. Как бы вы решили это?

Answer 1

Потому что вы неправильно устанавливаете размер холста. Не используйте CSS/style для установки размера, но используйте его атрибуты:

<canvas id="canvas" width=320 height=456 style="..."></canvas>

Ваше изображение растянуто, потому что по умолчанию размер растрового изображения для элемента холста составляет 300x150 пикселей, поэтому, если вы не установите размер должным образом, растровое изображение холста будет растянуто, чтобы соответствовать размеру элемента, установленному с помощью CSS.

Вы также можете установить размер с помощью JavaScript:

var canvas = document.getElementById('canvas');
canvas.width = 320;
canvas.height = 456;