title: Filtering specific range of numbers from an array
body: <p>I'm creating an algorithm that will blur the border of a canvas(image). Before applying the blur effect, I am creating an array <code>filtered</code> that includes all pixel values that needs to be blurred.</p>
  
  <p>I've created an example with a 10×10px image.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function compute(w, h, bW) {
    w *= 4;
    var ignored = [];
    for (y = bW; y &lt; (h - bW); y++) {
      for (x = 0; x &lt; (w - (bW * 4 * 2)); x++) {
        ignored.push(w * y + x + bW * 4);
      }
    }
    console.log(ignored);
  
    function range(limit) {
      return Array.apply(null, Array(limit)).map(function(_, i) {
        return i;
      })
    }
    Array.prototype.diff = function(array) {
      return this.filter(function(elem) {
        return array.indexOf(elem) === -1;
      })
    }
    var filtered = range(w * h).diff(ignored);
    console.log(filtered);
  
    return filtered;
  }
  
  compute(10, 10, 2);
  
  //////////////////////////////////////////////////////////////////
  // Below is just to display the numbers that are being filtered //
  //    Here, the size is 100 x 100 px with 10px border width     //
  //////////////////////////////////////////////////////////////////
  
  var pixels = compute(100, 100, 10);
  var c = document.getElementsByTagName('canvas')[0];
  var ctx = c.getContext('2d');
  var imgD = ctx.createImageData(100, 100);
  for (var i = 0; i &lt; imgD.data.length; i += 4) {
    if (pixels.indexOf(i) &gt; 0) {
      imgD.data[i + 0] = 0;
      imgD.data[i + 1] = 0;
      imgD.data[i + 2] = 0;
      imgD.data[i + 3] = 255;
    } else {
      imgD.data[i + 0] = 255;
      imgD.data[i + 1] = 0;
      imgD.data[i + 2] = 0;
      imgD.data[i + 3] = 255;
    }
  }
  ctx.putImageData(imgD, 10, 10);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The array <code>filtered</code> contains all the numbers that has the background color <img src="https://i.stack.imgur.com/Rekq9.png" alt="dark"> and <code>ignored</code> contains all the numbers that has the background color <img src="https://i.stack.imgur.com/qrMKa.png" alt="light"> and <img src="https://i.stack.imgur.com/W3kfW.png" alt="lighest"> in the image.</p>
  
  <h3>My question is:</h3>
  
  <p>How do I change my code so that the array <code>filtered</code> will have the numbers with background color <img src="https://i.stack.imgur.com/Rekq9.png" alt="dark"> and <img src="https://i.stack.imgur.com/qrMKa.png" alt="light"> and not <img src="https://i.stack.imgur.com/W3kfW.png" alt="lighest">?</p>
  
  <p><img src="https://i.stack.imgur.com/5pPrX.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>An Example on a bit high resolution(65×65px):</p>
  
  <p><img src="https://i.stack.imgur.com/w5HMC.png" alt="enter image description here"></p>
  
  <hr>