我是先将  canvas的大小与  图片大小调成一致   然后在渲染过后的canva用 css的手段 将其限制大小  这样就不会失帧了

<script>
  var canvasa = document.getElementById("canvasa");
  var contexta = canvasa.getContext("2d");

  var canvasb = document.getElementById("canvasb");
  var contextb = canvasb.getContext("2d");

  var image = new Image();
  window.onload=function(){
    image.src = "img/d.jpg";
    image.onload=function(){
      canvasa.width=image.width;//这个是重点
      canvasa.height=image.width;//这个是重点

      canvasb.width=image.width;//这个是重点
      canvasb.height=image.width;//这个是重点
      contexta.drawImage(image, 0, 0, canvasa.width, canvasa.height)
      canvasa.style.width='600px';//这个是重点
      canvasa.style.height='600px';//这个是重点
    }
  };

  function fillter() {
    console.log(canvasa.style.width)
      var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
      var Data=imageData.data;
      for (var i=0;i<canvasa.width*canvasa.height;i++){
        var r=Data[4*i+0]
        var g=Data[4*i+1]
        var b=Data[4*i+2]

        var rgb=r*0.3+g*0.59+b*0.11

        Data[4*i+0]=rgb;
        Data[4*i+1]=rgb;
        Data[4*i+2]=rgb;
      }
      contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
    canvasb.style.width='600px';//这个是重点
    canvasb.style.height='600px';//这个是重点
  };
</script>

不知道我分享的这个能不能帮到你     

(function($){
   var myCanvas = document.getElementById("myCanvas");
   var cxt = myCanvas.getContext("2d");
   var image = new Image();
   // polyfill 提供了这个方法用来获取设备的 pixel ratio
   var getPixelRatio = function(context) {
       var backingStore = context.backingStorePixelRatio ||
               context.webkitBackingStorePixelRatio ||
               context.mozBackingStorePixelRatio ||
               context.msBackingStorePixelRatio ||
               context.oBackingStorePixelRatio ||
               context.backingStorePixelRatio || 1;

       return (window.devicePixelRatio || 1) / backingStore;
   };

   var ratio = getPixelRatio(cxt);


   window.onload = function(){
       image.src = "images/phone.png";
       image.onload = function(){
           // 注意，这里的 width 和 height 变成了 width * ratio 和 height * ratio
           cxt.drawImage(image, 0, 0, myCanvas.width * ratio, myCanvas.height * ratio);
       }
   };

})(jQuery)