title: Javascript pixel manipulation of canvas, Blur filter not working
body: <p>Im currently working on a simple drawing board website in canvas.</p>
  
  <p><a href="http://webbox.cs.du.edu/~ansbashe/My_Art/myart.html" rel="nofollow">http://webbox.cs.du.edu/~ansbashe/My_Art/myart.html</a></p>
  
  <p>I want to blur the canvas with this javascript code (in a webworker).  The problem is that the returning data fill the canvas with the original picture and not the blurred image that I am expecting.  Is there anything I can do to get the outcome that I am looking for?  </p>
  
  <pre><code>var  filter =   [   [1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 1]];
  
  var factor = 1/9; 
  var bias = 0; 
  
  var w = 890;
  var h = 400;
  function filts() {
  
      filt = 0;
      for(var x = 0; x &lt; w;  x++)
      {
          for(var y = 0; y &lt; h; y++)
          {
              var r = 0;
              var g = 0;
              var b = 0;
              var imgX = ((x - Math.floor(filter.length/2)+filterX + w) % w);
              var imgY = ((y - Math.floor(filter.length/2)+filterY + h)%h);
  
              for(var filterX = 0; filterX &lt; filter.length; filterX++) {
                  for(var filterY =0; filterY &lt; filter.length; filterY++) {
  
  
                      r += imgData.data[imgX*4 + imgY * w * 4] * filter[filterY][filterX];
                      g += imgData.data[imgX*4 + imgY*w*4 + 1] * filter[filterY][filterX];
                      b += imgData.data[imgX*4 + imgY*w*4 + 2] * filter[filterY][filterX];
  
                  }
              }
              var index = (x + (y * w)) * 4;
              retData.data[imgX*4 + imgY*w*4] = Math.min(Math.max(Math.floor(factor *r + bias),0),255);
              retData.data[imgX*4 + imgY*w*4 + 1] = Math.min(Math.max(Math.floor(factor *g + bias),0),255);
              retData.data[imgX*4 + imgY*w*4 + 2] = Math.min(Math.max(Math.floor(factor *b + bias),0),255);
              retData.data[imgX*4 + imgY*w*4 + 3] = imgData.data[imgX*4 + imgY*w*4 + 3];
  
          }
      }
      postMessage({img: retData});
  }
  </code></pre>
  
  <p>Thanks for your time.</p>