Why is canvas.drawImage() stretching my image?

Question

Canvas

Shouldn't it be supposed to output it just like a normal img tag?
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

Give the canvas tag the width and height attributes, otherwise it will not know what size it actually is, and will draw in a 300x150 viewport, and then stretch it to the size you specify using CSS.