Add double buffered canvas support

[nekolab]

Hello I just found two issue in this project.

First is this file couldn't work on Windows Chrome (just test v40 stable and v41 beta), I guess clearRect seems doesn't work correctly some time, it will cause the heatmap become heater and heater, and finally all color became red. If you want to reproduce it, switch to Windows PC and Chrome, revert this patch, set a breakpoint on line 120, you will have a great chance to see colored circle still exist after clearRect. But if you set a breakpoint on line 119, you cannot reproduce it anymore. I think it's a Chrome-side bug (and may related with OpenGL or other acculturate mechanism), but I can't reproduced it by using more clear way. So I can't fill a bug on Chrome issue tracker. But fortunately, this patch seems fixed this issue.

Second is rendering frequently will cause flicker, it's clearly that use double buffered canvas can fix this issue, so I added a in-memory canvas as a buffered canvas, test shows it works fine and even fixed previous issue, so I uploaded this patch and hope it can be merged it to main project.

Thanks!

[mourner]

Thanks for the pull! Can you demonstrate flickering with a JSFiddle? It seems to me that there should be no flickering because Canvas drawing operations are synchronous, so it won't be updated until all the drawing code ran.

[nekolab]

I will prepare a demonstrate later. By the way, could you confirm the bug which can be only reproduced on Chrome Windows?

Update: Seems Chrome 41 fixed this issue, I will test more Chrome based browser..

[nekolab]

I know how flicker comes When using Chrome under 41, I found an ugly way to fix this issue. Since I suspect clearRect() isn't synchronize in Chrome on Windows, I wrapped draw code into setTimeout(xx, 0) to fix it and it works. You can see diff here: https://github.com/planetmeow/simpleheat/commit/4faecde376760ff8dfc97ebd7f79562fc8744b79#diff-5a1a82be4158a6d08fd813b6acd8e68d But fix in this way will cause flicker, like this: http://jsfiddle.net/sunny_jerry/rw4jw7o7/6/ To fix flicker, I introduced double buffered canvas, it fix flicker and render issue without setTimeout. So I upload this patch, because in China, Chrome-based browser are rarely update their core, make compatibility with Chrome older than 41(current in beta channel) is possible.

Hope you can understand what I'm talking about, sorry for my poor English~ Thanks~