Compound Blur that's cross-browser and cross-device friendly

I turn Java Applets into JavaScript experiences daily. Currently we're working with Olympus a microscope company. As you may (or may not?) know, whatever you're looking at through a microscope can become blurred. When showing this through in an interactive JavaScript tutorial I must make sure that the blurring effect works across all browsers (including IE9) and that it works efficiently on say an iPad device (without killing the processor and battery life). I've been testing with CompoundBlur by Mario Klingemann: http://www.quasimondo.com/CompoundBlurForCanvas/CompoundBlurDemo.html

The recent tutorial I've been translating to JavaScript requires that the blur builds from the center outward, another-words, the last thing to fully blur when the slider UI is slid all the way to it's maximum value is are the edges of the specimen photo.

The issue: While testing the CompoundBlur I noticed that it was blurring from the outside inward and that the edges were actually blurring very quickly. I found that by taking the difference between every value in the gradientMap array and then reversing the order of the array I was able to inverse the blur effect and match the original.... I am writing this in a library oddly enough so I haven't access to my code at this time, I will share what I did and the results soon..