javascript - Needed canvas blurring tool -

i have drawing app fabric.js ( http://fabricjs.com/freedrawing/ )
want embed blurring tool photoshop ( http://www.demowolf.com/tutorials/demo.php?id=1503&series=85&format=html )

this blurring function not working fine when try change color going wrong can see screenshots below ...

function boxblurcanvasrgba( id, top_x, top_y, width, height, radius, iterations ){  if ( isnan(radius) || radius < 1 ) return;   radius |= 0;   if ( isnan(iterations) ) iterations = 1;  iterations |= 0;  if ( iterations > 3 ) iterations = 3;  if ( iterations < 1 ) iterations = 1;   var canvas  = document.getelementbyid( 'paper' );  var context = canvas.getcontext("2d");  var imagedata;   try {    try {   imagedata = context.getimagedata( top_x, top_y, width, height );    } catch(e) {    // note: part supposedly needed if want work local files   // might okay remove whole try/catch block , use   // imagedata = context.getimagedata( top_x, top_y, width, height );   try {    netscape.security.privilegemanager.enableprivilege("universalbrowserread");    imagedata = context.getimagedata( top_x, top_y, width, height );   } catch(e) {    alert("cannot access local image");    throw new error("unable access local image data: " + e);    return;   }    }  } catch(e) {    alert("cannot access image");    throw new error("unable access image data: " + e);    return;  }   var pixels = imagedata.data;   var rsum,gsum,bsum,asum,x,y,i,p,p1,p2,yp,yi,yw,idx,pa;    var wm = width - 1;    var hm = height - 1;     var wh = width * height;  var rad1 = radius + 1;   var mul_sum = mul_table[radius];  var shg_sum = shg_table[radius];   var r = [];     var g = [];     var b = [];  var = [];   var vmin = [];  var vmax = [];   while ( iterations-- > 0 ){   yw = yi = 0;    ( y=0; y < height; y++ ){    rsum = pixels[yw]   * rad1;    gsum = pixels[yw+1] * rad1;    bsum = pixels[yw+2] * rad1;    asum = pixels[yw+3] * rad1;      for( = 1; <= radius; i++ ){     p = yw + (((i > wm ? wm : )) << 2 );     rsum += pixels[p++];     gsum += pixels[p++];     bsum += pixels[p++];     asum += pixels[p]    }     ( x = 0; x < width; x++ ) {     r[yi] = rsum;     g[yi] = gsum;     b[yi] = bsum;     a[yi] = asum;      if( y==0) {      vmin[x] = ( ( p = x + rad1) < wm ? p : wm ) << 2;      vmax[x] = ( ( p = x - radius) > 0 ? p << 2 : 0 );     }       p1 = yw + vmin[x];     p2 = yw + vmax[x];      rsum += pixels[p1++] - pixels[p2++];     gsum += pixels[p1++] - pixels[p2++];     bsum += pixels[p1++] - pixels[p2++];     asum += pixels[p1]   - pixels[p2];      yi++;    }    yw += ( width << 2 );   }    ( x = 0; x < width; x++ ) {    yp = x;    rsum = r[yp] * rad1;    gsum = g[yp] * rad1;    bsum = b[yp] * rad1;    asum = a[yp] * rad1;     for( = 1; <= radius; i++ ) {      yp += ( > hm ? 0 : width );      rsum += r[yp];      gsum += g[yp];      bsum += b[yp];      asum += a[yp];    }     yi = x << 2;    ( y = 0; y < height; y++) {      pixels[yi+3] = pa = (asum * mul_sum) >>> shg_sum;     if ( pa > 0 )     {      pa = 255 / pa;      pixels[yi]   = ((rsum * mul_sum) >>> shg_sum) * pa;      pixels[yi+1] = ((gsum * mul_sum) >>> shg_sum) * pa;      pixels[yi+2] = ((bsum * mul_sum) >>> shg_sum) * pa;     } else {      pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;     }         if( x == 0 ) {      vmin[y] = ( ( p = y + rad1) < hm ? p : hm ) * width;      vmax[y] = ( ( p = y - radius) > 0 ? p * width : 0 );     }       p1 = x + vmin[y];     p2 = x + vmax[y];      rsum += r[p1] - r[p2];     gsum += g[p1] - g[p2];     bsum += b[p1] - b[p2];     asum += a[p1] - a[p2];      yi += width << 2;    }   }  }  context.globalalpha = 0.8;  context.putimagedata( imagedata, top_x, top_y );  } 

can 1 give me code example ?

interesting question!

here's how implement blur brush using:

• an offscreen canvas
• a blur-effect algorithm
• compositing "clip" image fit in user's brush-strokes
• compositing "draw-behind" clear image behind blurred brushstroke image.

a demo: http://jsfiddle.net/m1erickson/badlp/

1. create offscreen canvas
2. let user draw on onscreen canvas brush
3. simultaneously draw same brush-strokes on offscreen canvas
4. after user finished brushing...
5. set offscreen canvas compositing "source-in" (any new drawing on existing brushstrokes.
6. drawimage image on offscreen canvas (the image drawn on brushstrokes)
7. use blur algorithm blur offscreen canvas (at point offscreen canvas contains blurred image on brushstrokes)
8. clear onscreen canvas
9. use drawimage copy blurred brush-image offscreen canvas onscreen canvas.
10. set onscreen canvas compositing "destination-over" (new drawings drawn behind existing blurred brush-image
11. drawimage source image onscreen canvas (the blurred brush-image remains , source image drawn behind brush-image)

here's how looks in code:

(the blur effect done using quasimondo's nice blurring algorithm: http://jsfiddle.net/m1erickson/badlp/)

// @ point, temp canvas contains  // users brush strokes  // draw image "clipped" brush strokes // using compositing == "source-in"  tempctx.save(); tempctx.globalcompositeoperation="source-in"; tempctx.drawimage(img,0,0); tempctx.restore();  // blur brush-image on temp canvas  boxblurcanvasrgba("tempcanvas",0,0,tempcanvas.width,tempcanvas.height,4,0);   // clear onscreen canvas  ctx.save(); ctx.clearrect(0,0,canvas.width,canvas.height);  // draw brush-image temp canvas onscreen canvas ctx.drawimage(tempcanvas,0,0);  // use compositing == "destination-over" // draw source image *behind* blurred brush-image  ctx.globalcompositeoperation="destination-over"; ctx.drawimage(img,0,0); ctx.restore(); 

source image:

offscreen canvas after drawing image on stroked area , blurring:

the onscreen canvas blurred area merged source image: