Radius: 0

Iterations: 1

This is a demo for a Javascript / Canvas based implementation of my Superfast Blur algorithm.

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

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

or: boxBlurCanvasRGB( 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: Superfast Blur v0.5

I've also implemented an alternative algorithm for the Box Blur which ist faster on some platformsStackBoxBlur for Canvas.

For a better looking blur which might be slightly slower check out my StackBlur for Canvas.

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

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

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

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

or: boxBlurCanvasRGB( 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: Superfast Blur v0.5

I've also implemented an alternative algorithm for the Box Blur which ist faster on some platformsStackBoxBlur for Canvas.

For a better looking blur which might be slightly slower check out my StackBlur for Canvas.

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

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