I am having errors with borders?

function printArt(arr){
for (let index = 0; index < arr.length; index++) {
    for (let j = 0; j < arr[index].length; j++) {
        let char = (arr[index][j].toString().trim() === '') ? '' : arr[index][j].toString().trim();
        process.stdout.write(char);   
    }
    process.stdout.write('\n');
}
return true;
}
let art1 = [
['.', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 
'-', '-', '-', '-', '-', '-', '-', '-', '-', '.'],

['|', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '|'], ['|', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '|'], ['|', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '|'], ['|', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '|'], ['|', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '|'], ['|', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '|'], ['|', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '|'], ['|', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '/', '/', '\', '\', '|'], ['\'', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '\''] ];

console.log (printArt(art1));

Now I am trying to add a frame, like this Write a function named addFrame that takes three (3) parameters: imageArray, borderDistance and borderChar. (a) imageArray is a 2D array of any dimension containing an ASCII art “image.” (b) borderDistance is a positive, non-zero integer that specifies the distance (or positions) the border will be placed from the original image. As an example, if the user specifies a value of 3, then the border must be placed at the 3rd position away from the edge of the image. An example is provided below. (c) borderChar is a single character that will be used for the decorative border around the image. If the user provides a null or empty border, use a default value of a single asterisk (*). If the user provides a string longer than 1 character, trim any leading and trailing whitespace and use only the first character in the trimmed string.

    function addFrame(imageArray, borderDistance, borderChar){
    let newImage = [] //new image

    let height = imageArray.length + (2*borderDistance);
    let width = imageArray[0].length +( 2 * borderDistance);

    //go through rows to
    for(let row = 0; row<height; row++){
        let new_row = []; //new row

        //these rows are border char
        if(row==0 || row == height-1){
            //fill row with border
            for(let col = 0; col<width; col++){
                new_row.push(borderChar);
            }
        }

        //these rows are just spacer characters
        else if(row < borderDistance || row >= height-borderDistance){

            //fill row with spacer
            for(let col = 0; col<width; col++){
                new_row.push(" ");
            }
        }

        //otherwise we also have original image pixels to add
        else{
            //get original row
            let original_row = imageArray[row-borderDistance];

            //traverse columns
            for(let col = 0; col< width; col++){

                //these columns are border chracters
                if(col == 0 || col == width-1){
                    new_row.push(borderChar);
                }

                //these columns are spacers
                else if(col < borderDistance || col >= width-borderDistance){
                    new_row.push(" ")
                }

                //these columns need to pull from original image
                else{
                    //add original image pixel
                    new_row.push(original_row[col-borderDistance])
                }
            }
        }

        //add row to new image
        newImage.push(new_row);
    }

    //return our new image
    return newImage;

}

console.log(printArt(addFrame(art1,3,'^')));

I can only get the top and bottom border with 3 spaces but not the sides.

I do not know what am I doing wrong?