JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

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 (
                (Math.min(x, w - x) < bW) ||
                (Math.min(y, h - y) < bH) ||
                
                (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;
}

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);