Info

I am not sure which one of my four box blur algorithms is faster. Lets find out. Additionaly there is a comparison to StackBlur, which is an almost gaussian blur but slower, though to be fair one has to apply 2x box blur to get the same smoothness.

Preparation code

<script src="http://www.quasimondo.com/BoxBlurForCanvas/StackBoxBlur.js" language="javascript"></script>
<script src="http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js" language="javascript"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js" language="javascript"></script>
<script src="http://www.quasimondo.com/IntegralImageForCanvas/IntegralImage.js" language="javascript"></script>
<div id="canvasHolder" style="position:absolute;left:20px; top:20px;text-align:center;font-size:10px;">
<canvas height="375" width="500" style="width: 500px; height: 375px;" id="canvas">
</canvas></div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

stackBoxBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 1);

boxBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 1);

stackBlurCanvasRGB('canvas', 0, 0, 500, 375, 8);

stackBoxBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 2);

boxBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 2);

integralBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 1);

integralBlurCanvasRGB('canvas', 0, 0, 500, 375, 8, 2);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Mario Klingemann on 4th March 2011
• Revision 2: published by Mario Klingemann on 4th March 2011

0 comments