我记得要搭建本地环境，也就是不能直接打开，本地要装个服务器

问题可能出在

                        canvasOffscreen.getContext('2d').drawImage(this,0,0,500,500,0,0,500,500);

改成

canvasOffscreen.getContext('2d').drawImage(this,0,0)

试试

题主更新了问题详情，基本可以很清晰的知道，问题不在canvas上，而在于对于img上。
img.complete这个只读属性，返回一个 Boolean 如果浏览器已经取出图像则返回true。但是这里有点特殊。

因为刷新的时候缓存过这个图片，在还没执行到onload的事件监听之前就已经加载完了，就会一直为true,从而导致onload里面的那一串drawImage 到 canvasOffscreen 的代码段根本没执行。从而直接ctx.drawImage了一个空白的canvasOffscreen。

已经有前人碰到过了，上一个链接 http://www.jb51.net/article/2... （说实话我也不知道这原文章是哪儿来的，抱歉，不然定引用原文。）

以下为原答案。

大兄弟啊，你自己都说在部分浏览器才不能显示，你能不能把那个部分浏览器的名字版本说一下呢。刚好我碰到的浏览器都能显示，咋debug。。

但是这个问题的确引起了我的注意，我特意去看了drawImage的兼容性相关介绍。 http://caniuse.com/#search=dr... 上找不到,只找到了mdn文档中的零星描述，粘贴过来供大家看看，散发下思路。
https://developer.mozilla.org...

兼容性注解

在 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)中，支持通过给 sw 和 sh 赋负值，对图像进行翻转。
从 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 开始，drawImage() 按照规范处理负参数，沿着合适的轴翻转矩形。
从(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始，当drawImage()调用 null 或者 undefined 图像时，会抛出 TYPE_MISMATCH_ERR 异常。
在 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前， 如果坐标值是非规定值或者是0，Firefox 会抛出一个异常。 按照规范描述，这种情况不会再发生。
Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)现在完全支持 CORS 跨域绘制图像，不需要污染的 canvas.
Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 现在允许 SVG 作为图像被绘制到 canvas ，不需要 污染的 canvas.