opencv.js image alignment using rectangles

Question

I need to align an image (img1) based on a reference image (img2) so i used this part of code to extract keypoints and descriptors by ORB AKAZE method:

    let im1 = cv.imread(cvs_resized);
    let im1Gray = new cv.Mat();
    cv.cvtColor(im1, im1Gray, cv.COLOR_BGRA2GRAY);
    let descriptors1 = new cv.Mat();
    let keypoints1 = new cv.KeyPointVector();
    
    orb = new cv.AKAZE();
    orb.detectAndCompute(im2Gray, new cv.Mat(), keypoints2, descriptors2);
    orb.detectAndCompute(im1Gray, new cv.Mat(), keypoints1, descriptors1);
    //console.log(keypoints1,descriptors1);
    
    let good_matches = new cv.DMatchVector();
    let bf = new cv.BFMatcher();
    let matches = new cv.DMatchVectorVector();
    bf.knnMatch(descriptors1, descriptors2, matches, 2);
    let knnDistance_option=1;
    let counter = 0;
    for (let i = 0; i < matches.size(); ++i) {
    let match = matches.get(i);
    let dMatch1 = match.get(0);
    let dMatch2 = match.get(1);
    //console.log("[", i, "] ", "dMatch1: ", dMatch1, "dMatch2: ", dMatch2);
    if (dMatch1.distance <= dMatch2.distance * parseFloat(knnDistance_option)) {
        //console.log("***Good Match***", "dMatch1.distance: ", dMatch1.distance, "was less 
   than or = to: ", "dMatch2.distance * parseFloat(knnDistance_option)", dMatch2.distance * parseFloat(knnDistance_option), "dMatch2.distance: ", dMatch2.distance, "knnDistance", knnDistance_option);
        good_matches.push_back(dMatch1);
        counter++;
    }
}

let imMatches = new cv.Mat();
let color = new cv.Scalar(0,255,0, 255);
cv.drawMatches(im1, keypoints1, im2, keypoints2, 
                  good_matches, imMatches, color);
cv.imshow('image_B_final_result1', imMatches);
//cv.drawKeypoints(im1Gray, keypoints1, keypoints1_img, keypointcolor);
//cv.drawKeypoints(im2Gray, keypoints2, keypoints2_img, keypointcolor);

let points1 = [];
let points2 = [];
for (let i = 0; i < good_matches.size(); i++) {
    points1.push(keypoints1.get(good_matches.get(i).queryIdx ).pt.x );
    points1.push(keypoints1.get(good_matches.get(i).queryIdx ).pt.y );
    points2.push(keypoints2.get(good_matches.get(i).trainIdx ).pt.x );
    points2.push(keypoints2.get(good_matches.get(i).trainIdx ).pt.y );
}

let mat1 = new cv.Mat(points1.length,1,cv.CV_32FC2);
mat1.data32F.set(points1);
let mat2 = new cv.Mat(points2.length,1,cv.CV_32FC2);
mat2.data32F.set(points2);

let h_ = cv.findHomography(mat1, mat2, cv.RANSAC);
console.log('here');
let image_B_final_result = new cv.Mat();
cv.warpPerspective(im1, image_B_final_result, h_, im2.size());
console.log(image_B_final_result);
 

But this feature extraction is not working good for me. Since i have some good rectangle shapes in both images, i decided to use rectangle extraction as follows :

let im1_b = cv.Mat.zeros(im1.cols, im1.rows, cv.CV_8UC3);
cv.threshold(im1Gray, im1_b, 120, 200, cv.THRESH_BINARY); 
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
let poly = new cv.MatVector();
// You can try more different parameters
cv.findContours(im1_b, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
// draw contours with random Scalar
for (let i = 0; i < contours.size(); ++i) {
    let color = new cv.Scalar(255, 0, 0);
            var cnt_ = contours.get(i);
// You can try more different parameters
var perimeter = cv.arcLength(cnt_, true);
//console.log( perimeter);
    var arc_tr  =40;              
if(perimeter > arc_tr && perimeter < 4*arc_tr ){
     //cv.drawContours(dst, contours, i, color, 1, cv.LINE_8, hierarchy, 100);
    var rect = cv.boundingRect(cnt_); 
    
    var point1 = new cv.Point(rect.x, rect.y);
var point2 = new cv.Point(rect.x + rect.width, rect.y + rect.height);
cv.rectangle(im1, point1, point2, color, 1, cv.LINE_AA, 0);

var X = rect.x + rect.width/2;
var Y = rect.y + rect.height/2;
 
cv.imshow('image_B_final_result1', im1);
    
}                 
   
    
}

Now , the question is : How can i use rectangle positions as keypoints and descriptors to use them for aligning image. Thanks in advance.