Radius: 0

Iterations: 1

This is a demo for a Javascript / Canvas Box Blur based on methods used in my StackBlur algorithm.

Usage: stackBoxBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel, iterations );

or: stackBoxBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius, iterations );

or: stackBoxBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius, iterations );

Download source: StackBoxBlur v0.3

I've also implemented an alternative algorithm for the Box Blur which might be faster on some platforms SuperfastBlur for Canvas.

Another alternative which is currently more a proof-of-concept is Integral Image Blur

For a better looking blur which might be slightly slower check out my StackBlur for Canvas. For a speed comparison of all 4 blur algorithms check this jsPerf test.

Usage: stackBoxBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel, iterations );

or: stackBoxBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius, iterations );

or: stackBoxBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius, iterations );

Download source: StackBoxBlur v0.3

I've also implemented an alternative algorithm for the Box Blur which might be faster on some platforms SuperfastBlur for Canvas.

Another alternative which is currently more a proof-of-concept is Integral Image Blur

For a better looking blur which might be slightly slower check out my StackBlur for Canvas. For a speed comparison of all 4 blur algorithms check this jsPerf test.