title: Needed canvas blurring tool
body: <p>I have drawing app something like fabric.js ( <a href="http://fabricjs.com/freedrawing/" rel="noreferrer">http://fabricjs.com/freedrawing/</a> ) <br>
  I want to embed the blurring tool like Photoshop ( <a href="http://www.demowolf.com/tutorials/demo.php?id=1503&amp;series=85&amp;format=html" rel="noreferrer">http://www.demowolf.com/tutorials/demo.php?id=1503&amp;series=85&amp;format=html</a> )  </p>
  
  <p><img src="https://i.stack.imgur.com/RtI6q.jpg" alt="enter image description here">  </p>
  
  <p>This is my blurring function but it not working fine when i am try to change color it is going something wrong you can see screenshots below ... </p>
  
  <pre><code>function boxBlurCanvasRGBA( id, top_x, top_y, width, height, radius, iterations ){
   if ( isNaN(radius) || radius &lt; 1 ) return;
  
   radius |= 0;
  
   if ( isNaN(iterations) ) iterations = 1;
   iterations |= 0;
   if ( iterations &gt; 3 ) iterations = 3;
   if ( iterations &lt; 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: this part is supposedly only needed if you want to work with local files
    // so it might be okay to remove the whole try/catch block and just 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 to access local image data: " + e);
     return;
    }
     }
   } catch(e) {
     alert("Cannot access image");
     throw new Error("unable to 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 a = [];
  
   var vmin = [];
   var vmax = [];
  
   while ( iterations-- &gt; 0 ){
    yw = yi = 0;
  
    for ( y=0; y &lt; height; y++ ){
     rsum = pixels[yw]   * rad1;
     gsum = pixels[yw+1] * rad1;
     bsum = pixels[yw+2] * rad1;
     asum = pixels[yw+3] * rad1;
  
  
     for( i = 1; i &lt;= radius; i++ ){
      p = yw + (((i &gt; wm ? wm : i )) &lt;&lt; 2 );
      rsum += pixels[p++];
      gsum += pixels[p++];
      bsum += pixels[p++];
      asum += pixels[p]
     }
  
     for ( x = 0; x &lt; width; x++ ) {
      r[yi] = rsum;
      g[yi] = gsum;
      b[yi] = bsum;
      a[yi] = asum;
  
      if( y==0) {
       vmin[x] = ( ( p = x + rad1) &lt; wm ? p : wm ) &lt;&lt; 2;
       vmax[x] = ( ( p = x - radius) &gt; 0 ? p &lt;&lt; 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 &lt;&lt; 2 );
    }
  
    for ( x = 0; x &lt; width; x++ ) {
     yp = x;
     rsum = r[yp] * rad1;
     gsum = g[yp] * rad1;
     bsum = b[yp] * rad1;
     asum = a[yp] * rad1;
  
     for( i = 1; i &lt;= radius; i++ ) {
       yp += ( i &gt; hm ? 0 : width );
       rsum += r[yp];
       gsum += g[yp];
       bsum += b[yp];
       asum += a[yp];
     }
  
     yi = x &lt;&lt; 2;
     for ( y = 0; y &lt; height; y++) {
  
      pixels[yi+3] = pa = (asum * mul_sum) &gt;&gt;&gt; shg_sum;
      if ( pa &gt; 0 )
      {
       pa = 255 / pa;
       pixels[yi]   = ((rsum * mul_sum) &gt;&gt;&gt; shg_sum) * pa;
       pixels[yi+1] = ((gsum * mul_sum) &gt;&gt;&gt; shg_sum) * pa;
       pixels[yi+2] = ((bsum * mul_sum) &gt;&gt;&gt; shg_sum) * pa;
      } else {
       pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
      }    
      if( x == 0 ) {
       vmin[y] = ( ( p = y + rad1) &lt; hm ? p : hm ) * width;
       vmax[y] = ( ( p = y - radius) &gt; 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 &lt;&lt; 2;
     }
    }
   }
   context.globalAlpha = 0.8;
   context.putImageData( imageData, top_x, top_y );
  
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Iphor.png" alt="enter image description here">
  can any one give me some code example ?</p>