Read my book

I wrote books about Webpack and React. Check them out!

Wednesday, December 24, 2014

HTML5 Canvas Gradients - Lattice Gradient

Inspired by my previous post about creating a rectangle gradient using HTML5 Canvas I started thinking would it be possible to generalize the approach without too much effort. As a result I tweaked the algorithm little and made it accept a matrix as an input.

I guess a visualization like this could be potentially useful for something like heatmaps if you bump up the resolution a lot. No idea of the performance, though.

Demo

Enjoy(?) the demo below. I think you could animate it with a little effort and makes your own x-mas lights or something.

JS Bin


Code Example

Here's the full code (not visible in RSS):