最近遇到這樣的問題，使用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();
        });