Почему canvas.drawImage() растягивает моё изображение?

Question

[DarkRover]

Разве он не должен по идее вывести его также как и обычный тэг img?

HTML

<canvas id="display">
    <p>Ваш браузер не поддерживает элемент canvas!</p>
    <script src="logic.js"></script>
</canvas>
<img src="images/ava.png">

CSS

#display {
    background: whitesmoke;
    width: 320px;
    height: 320px;
}

JS

const spr = new Image();
spr.src = "images/ava.png";
ctx.drawImage(spr, 0, 0);

Answer 1

[SagePtr]

Задайте тэгу canvas атрибуты width и height, иначе он не будет знать, какого он на самом деле размера, и будет рисовать во вьюпорте 300x150, а потом средствами CSS его растягивать до заданного вами.

Comments

[DarkRover]

Чувак... просто огромнейшее-приогромнейшее спасибо)))
Я 2 часа тупил с этой хернёй и даже на мгновение не подумал, что причина в CSS.
Ты спас мой сегодняшний сон, ещё раз спасибо)