Canvas-drawImage 绘制图片模糊问题

最近遇到这样的问题，使用canvas输出图片，图片比canvas区域大，尺寸限制之后反而变得特别模糊：

代码：

        var c = document.getElementById("myimage");//canvas的id
        var ctx=c.getContext("2d");
        var img=new Image();
        img.src = 图片地址;
        img.addEventListener('load',imgin);
        function imgin(){
            c.width = $(window).width();
            c.height = $(window).width()*img.height/img.width;
            clearInterval(m);
            ctx.clearRect(0,0,c.width,c.height);
            ctx.drawImage(img,0,0,c.width,c.height);
        }
        $(window).resize(function(){
            imgin();
        });

解决：先让图片以原先尺寸呈现，再用css限制：

var c = document.getElementById("myimage");<span style="font-family: Arial, Helvetica, sans-serif;">//canvas的id</span>
        var ctx=c.getContext("2d");
        var img=new Image();
        img.src = ...;//<span style="font-family: Arial, Helvetica, sans-serif;">图片地址;</span>
        img.addEventListener('load',imgin);
        function imgin(){
          // c.width = $(window).width();
          // c.height = $(window).width()*img.height/img.width;
            c.width = img.width;//重点
            c.height = img.height;<//重点
            clearInterval(m);
            ctx.clearRect(0,0,c.width,c.height);
            ctx.drawImage(img,0,0,c.width,c.height);
            c.style.width = '100%';//重点
        }
        $(window).resize(function(){
            imgin();
        });

效果：