Vue.js and Canvas: Issue with Coordinate Mapping for Dynamic Dot Layouts

I am using vue & html-canvas try to write a responsive “link Game”, here is the sample
[![enter image description here][1]][1]

But I found a really strange problem, Because I want to check if the line is “legitimate” when user make a line between two dots.
here is the picture describe what is “legitimate”:
[![enter image description here][2]][2]
Group1(which is col-1 & col2) may link together.
Group2(which is col-1 & col2) may link together.

To archive this goal, I use a variable to record each dot’s information.
this.Dotlocation[[RowID,ColID,GroupID],[x_location,y_location]]

But I found that that is whatever I do the information never get correct. here is the result

[ 
 // id,col,group
 [ [ 3, 2, 4 ], [ 631.4, 417.43 ] ], 
 [ [ 3, 1, 3 ], [ 495, 417.43 ] ], 
 [ [ 2, 1, 3 ], [ 214, 495 ] ],
 [ [ 1, 1, 3 ], [ 990, 462 ] ],
 [ [ 1, 2, 4 ], [ 631.4, 184.6002 ] ],
 [ [ 1, 1, 3 ], [ 495, 184.6002 ] ],
 [ [ 0, 1, 3 ], [ 990, 171 ] ],
 [ [ 2, 2, 4 ], [ 631.4, 301 ] ],
 [ [ 2, 1, 3 ], [ 495, 301 ] ],
 [ [ 0, 2, 4 ], [ 631.4, 68.2 ] ],
 [ [ 0, 1, 3 ], [ 495, 68.2 ] ],
 [ [ 4, 2, 4 ], [ 631.4, 533.801 ] ],
 [ [ 4, 1, 3 ], [ 495, 533.801 ] ],
 [ [ 1, 1, 3 ], [ 214, 301 ] ],
 [ [ 0, 1, 3 ], [ 214, 107 ] ]
 ]

There are several questions in this array:

  1. I don’t know why id is disordered.
  2. The Group&col are incorrect; it seems like the last column’s problem

Here is my code ( I’m sorry it’s a little bit long):

DrawImgOnCanvas(question,context1){
    let Column_Amount=question.length;
    var onchangegroup = false;
    let Column_ID = 1
    this.Group = 1       
    for (let col = 0; col < question.length; col++) { //Column
        console.log("col",col);
        //紀錄錨點資訊
        // let Dot_Row_ID = 1
        const Max_Img_Size = this.CountMaxImgSize(this.QuestionDataStructure[col].length);
        let RWD_Colum_Gap=this.CountRWDYGap(question[col])
        
        console.log(RWD_Colum_Gap);

        for (let Dot_Row_ID = 0; Dot_Row_ID < question[col].length; Dot_Row_ID++) { //Row
            console.log("Group1",this.Group);
            let Img = new Image();
            // let Image_Url=new URL(`../../${question[col][row]}`, import.meta.url).href
            let Image_Url = icon //FIXME: change to dynamic import
            Img.src = Image_Url;

            let Img_Size = this.ResizeRWDImg(Max_Img_Size,Img);
            // Img.height = Img_Size.New_Height;
            // Img.width = Img_Size.New_Width;
            let x = this.Min_border + Max_Img_Size.Max_Width*col + this.RWD_Gap_Width*col
            let y = this.Min_border + RWD_Colum_Gap + Max_Img_Size.Max_Height*Dot_Row_ID
            // let bordr=100
            Img.onload = () => {
                console.log(this.Min_border);
                context1.drawImage(Img, x, y, Img_Size.New_Width, Img_Size.New_Height);
                context1.beginPath();
                if (col == 0) {
                    console.log("Add on Right: Using Group",this.Group);
                    // add on right
                    context1.arc((x+Img_Size.New_Width+this.Min_border), (y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
                    this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x+Img_Size.New_Width+this.Min_border, y+Img_Size.New_Height/2]]);
                    context1.fillStyle = 'black';
                    context1.fill();
                }
                else if (col == Column_Amount-1) {
                    // add on left
                    context1.arc(x-this.Min_border,(y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
                    this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]]);
                    context1.fillStyle = 'black';
                    context1.fill();
                }
                else{
                    console.log("Add on Both: Using Group",this.Group);
                    //Right
                    context1.arc((x+Img_Size.New_Width+this.Min_border), (y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
                    this.DotLocation.push([[Dot_Row_ID,Column_ID+1,this.Group+1],[x+Img_Size.New_Width+this.Min_border, y+Img_Size.New_Height/2]]);
                    //Left
                    context1.arc(x-this.Min_border,(y+(Img_Size.New_Height/2)), this.DotRadius, 0, Math.PI * 2, true);
                    this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]]);
                    context1.fillStyle = 'black';
                    context1.fill();                
                }
                context1.closePath();
            }
            // Row_ID++;
        }
        if (col != 0) {
            console.log("Change Group");
            this.Group++;
            Column_ID +2 ;
        }
    }
},

here is the input datas:

question:[  
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],  
['assets/GamePic/Cat.png','assets/GamePic/Cat.png']
],

Thank you for your patient, hopes for your reply.

  [1]: https://i.stack.imgur.com/MmxjB.png
  [2]: https://i.stack.imgur.com/MoZX6.png