javascript（canvas）でダブルクリックイベントのfor文がうまく回らない

全コードは長いので割愛します。
ユーザーが任意に画像を選び、それをcanvas上に描画しています。その際、
images[j].drawOffsetX = x;
のようにその画像の座標をプロパティに入れています。描画する画像はimagesという配列に突っ込んでいる状態です。

画像をダブルクリックで消去するコードを書きたいのですが、どうもfor文がうまく回っていません。最終画像をダブルクリックするとうまく消去できますが、それ以外だと次の連番の画像も消えてしまい、「は残す」のコンソールにも吐かないことから、for文に問題があるように思えます。

javascript
1//ダブルクリック時消去
2        const mouseDBclick = function(e){
3            console.log(dragTarget);
4            context.clearRect(0, 0, canvas.width, canvas.height);
5                let MaxImg = images.length;
6                console.log("画像最大数は" + MaxImg);
7                
8                for(let i=0; i < MaxImg+1; i++){
9                    if (i == Number(dragTarget)) {
10                        images.splice(i,1);
11                        console.log(dragTarget + "は消す");
12                        MaxImg =-1;
13                    } else {
14                        x = images[i].drawOffsetX;
15                        y = images[i].drawOffsetY;
16                        w = images[i].drawWidth;
17                        h = images[i].drawHeight;
18                        context.drawImage(images[i], x, y, w, h);
19                        console.log(i + "は残す");
20                    }
21                }
22        }
23canvas.addEventListener('dblclick',  function(e){mouseDBclick(e);},  false);

canvasの技術的な問題ではなくjavascriptの基本構文の問題のような気がしますが、ご指摘願えないでしょうか。

babu_babu_baboo

2021/02/15 12:42 編集

for(let i=0; i < MaxImg+1; i++){... MaxImg に１つ足すのは余計。削除した時にカウンタの変数 i は、カウントしてはいけない。

行動規範の内容に同意します

回答2件

自己解決

javascript
1for(let i=0; i < MaxImg; i++){
2                    if (i == Number(dragTarget)) {
3                        // images.splice(i,1);
4                        // 00位置に00大きさで描画して配列からは除外しない
5                        context.drawImage(images[i], 0, 0, 0, 0);
6                        images[i].drawOffsetX = 0;
7                        images[i].drawOffsetY = 0;
8                        images[i].drawWidth = 0;
9                        images[i].drawHeight = 0;
10                    } else {
11                        x = images[i].drawOffsetX;
12                        y = images[i].drawOffsetY;
13                        w = images[i].drawWidth;
14                        h = images[i].drawHeight;
15                        context.drawImage(images[i], x, y, w, h);
16                    }
17                }