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

Use pre-rendered arcs (big performance increase) #35

wants to merge 1 commit into
base: master


None yet
3 participants
Copy link

alastaircoote commented Nov 27, 2012

I've tweaked the heatmap.js code to render the circle+shadow once (on a third canvas) then use a combination of drawImage() and globalAlpha to replace the repeated circle draws. The performance increases are significant- check out the before:

and after:

More details in a blog post here:


This comment has been minimized.

Copy link

muloka commented Feb 20, 2013



This comment has been minimized.

Copy link

pa7 commented Apr 19, 2013

Hello Alastair,
first things first, I want to apologize for my late response. Second, thank you for this neat contribution.
Unfortunately there's a problem, as one of the commenters of your blog pointed out. Due to a kind of forced architectural decision of using shadows in order to prevent adding up alpha gradients that shouldn't add up, your proposed technique for performance improvement wouldn't work with the current rendering process.

I'm currently thinking of redesigning the rendering process of heatmap.js, whether there is a way of achieving the intended behaviour without major performance drawbacks, and your contribution is great input for that.


This comment has been minimized.

Copy link

alastaircoote commented Apr 19, 2013

Totally agree- apologies, I'd totally forgotten about making this pull request. Sadly, it does impact on the overall look of the heatmap.

@pa7 pa7 closed this Apr 19, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.