Why set canvas size in CSS cause imported image blurry while setting in HTML Tag works well?

Question

I was trying to import an image in canvas with drawImage method. The funny thing is when I set canvas width & height in CSS in the first place and the image was very blurry, but when I set the size in canvas tag, it works all well. Why is that?

'''

<style>
         #canvas
        {
            width:800px;
            height:600px;
            background-color: pink;
        } 
</style>
    <canvas id="canvas"> </canvas>

<script>
    var img=new Image();
    img.src='img.jpg';
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    img.onload=function()
    {
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
    }
</script>

'''