Browser swtich tab renderer.CanvasRenderer animation is blank

[deyihu]

maptalks's version and what browser you use?

Issue description

我基于 maptalks.Layer 扩展一个 Layer ,其Renderer 是renderer.CanvasRenderer，
在上面我利用 canvas 2d 画布进行 图形绘制 绘制完成执行 this.completeRender()，是没有问题的，
例如：

当我在Layer 上进行动画（我没有用renderer.CanvasRenderer提供的动画接口），自己在Layer中自定义了一个动画周期函数，然后 获取到getRenderer(),利用renderer.CanvasRenderer 的canvas对象 然后调用
周期性的在context 进行的绘制和擦除，其大概代码为：
var context=this._canvas.getContext("2d");
context.save();
context.globalCompositeOperation = 'destination-out';
context.fillStyle = 'rgba(0, 0, 0, .1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.restore();
// renderer.clearCanvas();
renderer.completeRender();

每次周期循环内进行 renderer.completeRender() 提交；也是没有问题，但是当我切换浏览器标签，在切换到当前页面，页面中底图一片空白；

例如
（来回切换浏览器标签试试就会发现问题）

不知切换 浏览器标签时触发了是么事件，还是怎么的，

我怀疑是是自己在 画布上填充了颜色导致底图被覆盖，但是不切换浏览器标签就没有这个问题；切换回来对地图执行任何操作底图就会出来了；还是我自定义的Layer图层对底图的TileLayer 有冲突呢？

我的动画图层和静态图层两个图层叠加在一起的，比如道路动画，一个绘制静态的道路，一个是点的图层，点的图层是动态的利用周期性函数进行绘制的,沿路绘制的

根据我的测试发现，如果 map 的pitch=0没有这个问题，当pitch>0，会出现该问题，而且是TIleLayer加载完成后才出现该问题，如果tileLaye正在加载的过程中不会出现该问题

more examples:

如果有必要我会将所有代码托管出来

Please provide a reproduction URL (on any jsfiddle like site)

[wsw0108]

webgl 有context lost事件，不知道canvas2d有没有？

[deyihu]

@wsw0108 我刚才看了一下官方的插件的例子也是有这个问题的

animatemarker

调整一下 pitch 试试就可以发现问题了

[fuzhenn]

感谢提出issue，你太给力了，哈哈。

这个问题和你的逻辑没关系，是chrome的bug：chrome上webgl canvas离屏绘制时，切换tab后会自动变空白导致的。

TileLayer在pitch为0时，是用canvas来绘制的，pitch > 0时，会自动切换为webgl模式，所以pitch > 0时会出现该问题。

这个问题有两个解决方案：

• 临时方案，采用double buffer，即gl绘制完成后，把webgl canvas绘制在一个普通的2d canvas上，就不会变空白了，但这样会影响一些性能。
• 重现一下，给chrome提个issue试试看, 希望chrome的大神修掉

你的意见如何？

PS:
我看了一下你的代码，图层动画不需要自己控制requestAnimationFrame，有个简便的方法是把renderer的needToRedraw方法返回true，map就会不停的调用draw方法了

具体可以参考示例中的动画图层示例：
http://maptalks.org/examples/cn/hellolayer/animation/#hellolayer_animation

[deyihu]

我不用needToRedraw 是因为我的动画中还要动态生成时间戳，不好用原生的动画函数来处理，不过我会考虑怎样结合的，给 chrome团对提issue那就算了，英语太烂了，我都不好意思说我的英语水平

我会经常来提问的奥；我正在测试maptalks的成熟度哎

[fuzhenn]

收到，我晚点整理一份最小重现代码，去chrome提交一下issue，然后反馈在这里。

最后欢迎常来，一起把maptalks做的更好 ^__^

[fuzhenn]

该问题已解决
增加了对document上visibilitychange事件的监听，能在激活浏览器标签时自动重绘所有图层

[deyihu]

@fuzhenn 棒棒哒 ，收到了