Javascript在缩放后调整div位置

我正在编写一个脚本，其中画布上有一个图像。用户可以使用鼠标滚轮缩放图像（使用d3js缩放），缩放以鼠标位置为中心

我的问题是画布上还有一些div，用来突出显示图像的某些部分。缩放时应更新这些div位置，以便它们仍然高亮显示相同的点。但我正在努力找到一个好的方法来做这件事。下面是一个基本示例，因此我希望div即使在缩放时也能覆盖图像的同一点

用于缩放图像的代码：

function zoom() {
    var e = d3.event;
    var tx = Math.min(0, Math.max(e.translate[0], 408 - 408 * e.scale));
    var ty = Math.min(0, Math.max(e.translate[1], 464 - 464 * e.scale));
    context.save();
    context.clearRect(0, 0, 408, 464);
    zoomE.translate([tx, ty]);
    context.translate(tx, ty);
    context.scale(d3.event.scale, d3.event.scale);
    context.drawImage(imageObj, 0, 0, 408, 464);
    context.restore();
}

谢谢