Filtering specific range of numbers from an array

Question

I'm creating an algorithm that will blur the border of a canvas(image). Before applying the blur effect, I am creating an array filtered that includes all pixel values that needs to be blurred.

I've created an example with a 10×10px image.

function compute(w, h, bW) {
  w *= 4;
  var ignored = [];
  for (y = bW; y < (h - bW); y++) {
    for (x = 0; x < (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 < imgD.data.length; i += 4) {
  if (pixels.indexOf(i) > 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);

<canvas></canvas>

The array filtered contains all the numbers that has the background color and ignored contains all the numbers that has the background color and in the image.

My question is:

How do I change my code so that the array filtered will have the numbers with background color and and not ?

---

An Example on a bit high resolution(65×65px):

---

Answer 1

FIDDLEJS : http://jsfiddle.net/t14gr6pL/2/

Explanation:

It depends on the width of your triangles (the second color). In the 64*64 example, this width is 7.

Let's assume that this width (tw) is calculate like this (you can change) :

var tw = (2 * bW) - 1;

So your code would be:

function compute(w, h, bW) {
    var filtered = [];
    var WIDTH_MULTIPLICATOR = 4;

    var bH = bW;
    w *= WIDTH_MULTIPLICATOR;
    bW *= WIDTH_MULTIPLICATOR;

    var triangleWidth = (2 * bW) - 1;

    for (y = 0; y < h; y++) {
        for (x = 0; x < w; x++) {
            if (
                // Borders
                (Math.min(x, w - x) < bW) ||
                (Math.min(y, h - y) < bH) ||

                // Adding "Triangles"
                (Math.min(x, w - x) < bW + triangleWidth - Math.max(0, Math.min(y, h - y) - bH) * WIDTH_MULTIPLICATOR)

            ) {
                filtered.push(w * y + x);
            }
        }
    }

    return filtered;
}