Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add double buffered canvas support #8

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from

Conversation

nekolab
Copy link

@nekolab nekolab commented Jan 26, 2015

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!

Use onscreen canvas rendering heatmap may cause flicker.
To fix this issue, use double buffered canvas instead.
@mourner
Copy link
Owner

mourner commented Jan 26, 2015

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
Copy link
Author

nekolab commented Jan 26, 2015

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
Copy link
Author

nekolab commented Jan 26, 2015

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:
nekolab@4faecde#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~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants