Получить момент времени, когда цвет на canvas меняется

В произвольном месте canvas создаётся эпицентр бомбы (красный квадрат), который увеличивается каждую секунду на 3 клетки во все стороны. Зеленые квадраты - датчики, необходимо получить время от каждого датчика, когда они попадают в зону поражения. Я пытался это сделать через изменение цвета, но getImageData() почему-то всегда возвращает черный цвет.

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

let w = canvas.width = 400
let h = canvas.height = 400
let col_num = 50
let row_num = 50

let cell_w = w / col_num
let cell_h = h / row_num

let is_exploding = false

/*drawNet()*/
canvas.addEventListener('click', setBomb)
let imgData = ctx.getImageData(132, 36, 1, 1).data
function drawNet() {
    let net_path = ''

    for (let i = 0; i < col_num + 1; i++) {
        net_path += `M ${i*cell_w} 0 V ${h} `
    }

    for (let i = 0; i < row_num + 1 ;i++) {
        net_path += `M 0 ${i*cell_h} H ${w} `
    }
    ctx.stroke(new Path2D(net_path))
}

function explode(c_x, c_y, blow_radius) {

    is_exploding = true
   /*ctx.clearRect(0, 0, w, h)*/

    let x = (c_x - blow_radius) * cell_w
    let y = (c_y - blow_radius) * cell_h
    let blow_w = (blow_radius * 2 + 1) * cell_w
    let blow_h = (blow_radius * 2 + 1) * cell_h
    detectDistance()
   /* ctx.save()*/
    ctx.fillStyle = 'red'
    ctx.fillRect(x, y, blow_w, blow_h)
    /*ctx.restore()*/

    /*drawNet()*/

    let max_dist_to_edge = Math.max((c_x - blow_radius),
        (col_num - c_x - blow_radius - 1),
        (c_y - blow_radius),
        (row_num - c_y - blow_radius - 1))

    if (max_dist_to_edge > 0) {
        blow_radius += 3
        setTimeout(() => explode(c_x, c_y, blow_radius), 1000)
        console.log(imgData[0] + ' ' + imgData[1] + ' ' + imgData[2]);
    } else {
        is_exploding = false
        setTimeout(() => {
            ctx.clearRect(0, 0, w, h)
            /*drawNet()*/
        }, 2000)
    }
}
function detectDistance(){
    /*ctx.save()*/
    ctx.fillStyle = 'green'
    ctx.fillRect(128, 32, 8, 8)
    ctx.fillRect(80, 336, 8, 8)
    ctx.fillRect(344, 296, 8, 8)





}
function setBomb(e) {
    if (!is_exploding) {
        let x = e.offsetX
        let y = e.offsetY
console.log(x)
        console.log(y)
        let c_x = Math.floor(x / cell_w)
        let c_y = Math.floor(y / cell_h)
        explode(c_x, c_y, 0)

    }
}