④ let startX, startY, endX, endY;
意味
- マウスを押した位置（スタート地点）と、
- マウスを離した位置（エンド地点）を記録するための変数です。
| 変数 | 意味 |
|---|---|
startX | ドラッグ開始時のX座標（横） |
startY | ドラッグ開始時のY座標（縦） |
endX | ドラッグ終了時のX座標（横） |
endY | ドラッグ終了時のY座標（縦） |
なぜ必要？
- この2点の座標から、ドラッグした範囲（四角形）を計算できるから。
- その範囲だけぼかしをかけたいので、必要になります。
ポイント
- ドラッグした向きによって、スタートとエンドが逆になることもあるので、
必ずMath.min()/Math.max()を使って、正しい範囲を計算しています。