Image to Use:

Select Size of n x n circular operator to use to erode, dilate, or open (open = erode then dialte) the image

Area =

        Javascript Code:
        
            function ErodebyN(img, imgd, N) 
            {

                altImg = ctx.getImageData(0,0,ctx.viewportWidth,ctx.viewportHeight);
                var altpix = altImg.data;

                var pix = imgd.data;
                var rowSize = ctx.viewportWidth;
                var colSize = ctx.viewportHeight;
                var curregion = 0, tempregion = 0;
                var counter = 0;

                var temp;
                var h = [];
                var halfn = Math.floor(N/2);
                var n = (-1)*halfn;

                for (var i = 0; i < N; i++) {
                    for (var j = 0; j < N; j++) {
                        if ( (n+i)*(n+i) + (n+j)*(n+j) <= N*N)  
                        {
                            temp = [n + i,n+j];
                            h[counter] = (temp);
                            counter++;
                        };

                        // //row
                        // h[i*N+j][0] = n + i;
                        // //col
                        // h[i*N+j][1] = n + j;
                    };
                };
                counter = 0;

                //Erode it
                for (var row = 0; row < img.height; row++) 
                {
                    for (var col = 0; col < img.width; col++) 
                    {
                        if(pix[4*((row)*img.width+(col))] > 1)
                        {

                            for (var i = 0; i < h.length; i++) 
                            {
                                //check if surrounding pixels belong to
                                //an already labeled region
                                if (row+h[i][0] >= 0 ||  col+h[i][1] >= 0 || row+h[i][0] < img.width || col+h[i][1] < img.height) 
                                {
                                    if (pix[4*((row+h[i][0])*img.width+(col+h[i][1]))] > 1) 
                                    {
                                        counter++;
                                    } else {break;};


                                } else{break;};

                            };

                        };
                        //console.log(counter,N*N);
                        if (counter == N*N) {
                            altpix[4*(row*rowSize + col) ] = 255;
                            altpix[4*(row*rowSize + col)+1 ] = 255;

                            altpix[4*(row*rowSize + col)+2 ] = 255;

                            altpix[4*(row*rowSize + col)+3 ] = 255;
                        } else
                        {
                            altpix[4*(row*rowSize + col) ] = 0;
                            altpix[4*(row*rowSize + col)+1 ] = 0;

                            altpix[4*(row*rowSize + col)+2 ] = 0;

                            altpix[4*(row*rowSize + col)+3 ] = 255;
                        };
                        counter = 0;

                    };
                };

                ctx.putImageData(altImg,0,0);
            };

            function DilatebyN(img, imgd, N) 
            {

                altImg = ctx.getImageData(0,0,ctx.viewportWidth,ctx.viewportHeight);
                var altpix = altImg.data;

                var pix = imgd.data;
                var rowSize = ctx.viewportWidth;
                var colSize = ctx.viewportHeight;
                var updateFlag = true;

                var temp;
                var h = [];
                var halfn = Math.floor(N/2);
                var n = (-1)*halfn;
                var counter = 0;

                for (var i = 0; i < N; i++) {
                    for (var j = 0; j < N; j++) {
                        if ( (n+i)*(n+i) + (n+j)*(n+j) <= N*N)  
                        {
                            temp = [n + i,n+j];
                            h[counter] = (temp);
                            counter++;
                        };

                        // square operator
                        // temp = [n + i,n+j];
                        // h[i*N+j] = (temp);

                    };
                };


                counter = 0;

                //Dilate it
                for (var row = 0; row < img.height; row++) 
                {
                    for (var col = 0; col < img.width; col++) 
                    {

                        for (var i = 0; i < h.length; i++) 
                        {
                            //check if surrounding pixels belong to
                            //an already labeled region
                            if (row+h[i][0] >= 0 ||  col+h[i][1] >= 0 || row+h[i][0] < img.width || col+h[i][1] < img.height) 
                            {
                                if (pix[4*((row+h[i][0])*img.width+(col+h[i][1]))] > 1) 
                                {
                                    altpix[4*(row*rowSize + col) ] = 255;
                                    altpix[4*(row*rowSize + col)+1 ] = 255;

                                    altpix[4*(row*rowSize + col)+2 ] = 255;

                                    altpix[4*(row*rowSize + col)+3 ] = 255;
                                    updateFlag = false;
                                    break;
                                };

                            };

                        };
                        if (updateFlag) 
                        {
                            altpix[4*(row*rowSize + col) ] = 0;
                            altpix[4*(row*rowSize + col)+1 ] = 0;

                            altpix[4*(row*rowSize + col)+2 ] = 0;

                            altpix[4*(row*rowSize + col)+3 ] = 255;
                        };
                        updateFlag = true;

                    };
                };

                ctx.putImageData(altImg,0,0);
            };
        
    

Plot of graph of Area versus Operator Size. The first point equals the original area.