Conversation
Use onscreen canvas rendering heatmap may cause flicker. To fix this issue, use double buffered canvas instead.
|
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. |
|
I will prepare a demonstrate later. Update: Seems Chrome 41 fixed this issue, I will test more Chrome based browser.. |
|
I know how flicker comes Hope you can understand what I'm talking about, sorry for my poor English~ |
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!