canvas下的全屏問題

這段時間在管理後臺，有用到圖片全屏的，我是用canvas的引入的圖片，哎！也是給本身挖了一個大坑，沒辦法，只能踩坑走啦，因此當時想着能不能直接用canvas直接進行圖片全屏查看，不過網上百度出來的也是五花八門，結合百度本身整理了一個小的demo

HTML

<canvas id="blog" width="548" height="364"></canvas>
  <br/>
  <input value="點擊全屏" onclick="fullScreen();" type="button">

JS

window.onload = function(){  
          //引入圖片在canvas中
        var blog =document.getElementById('blog');  
        var context = blog.getContext('2d');  
        var img = new Image();  
        img.onload = function(){  
            draw(this);  
        };  
        img.src = 'img/2.jpg';  
        function draw(obj){  
            context.drawImage(obj,0,0);        
        }  
    };  
    //進行全屏並適配各瀏覽器
      function fullScreen() {
          var element = document.getElementById('blog'),method = "RequestFullScreen";
            var prefixMethod;
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (prefixMethod) 
                    return;
                if (prefix === "") {
                    // 無前綴，方法首字母小寫
                    method = method.slice(0,1).toLowerCase() + method.slice(1);
                }
                var fsMethod = typeof element[prefix + method];
                    if (fsMethod + "" !== "undefined") {
                        // 若是是函數,則執行該函數
                        if (fsMethod === "function") {
                            prefixMethod = element[prefix + method]();
                        } else {
                            prefixMethod = element[prefix + method];
                        }
                    }
                }
            );
            return prefixMethod;
        };