Radius: 0
Iterations: 1
This is a demo for a Javascript / Canvas based Integral Image Blur algorithm.

When applied only once, this algorithm is slower than my previous Superfast Blur, but if you apply another blur to the same image it might be faster sice the integral image has only to be calculated once. This speedup will only work for 1 iteration blurs. A possible application of this would be an animated blur.

Usage: integralBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel, iterations );
or: integralBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius, iterations );
or: integralBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius, iterations );

The "iterations" argument controls how many times the blur will be repeated. This can be used to achieve a smoother look, but it will slow down things considerably especially for big radii. I rather recommend to use StackBlur in that case.

Download source: Integral Image v0.4

You might also want to check out StackBlur, StackBox Blur and Superfast Blur.

For a speed comparison of all 4 blur algorithms check this jsPerf test.