在画布上平移图像后，工具提示无法在平移位置查看？

Question

以下是我的代码供参考。

1. Canvas上显示一个主要图像。
2. 在带有 dataJSON 对象的图像上，我正在传递x和y 在那里协调和绘制球图像。
3. 然后添加工具提示。 （function tooltipFunc）
4. 但是当我平移图像时，那些工具提示就不可见了 悬停的球图像。**
5. 在 tooltipFunc 功能中，如果代码用于默认位置时 页面首次加载。 其他代码用于翻译位置 当我们平移图像以显示工具提示时。
6. 但是在平移之后，当鼠标悬停在球图像上时，工具提示就是 不可见。当我点击那些球图像时，工具提示就是 可见但不在翻译位置。

有什么建议吗？

//以下是代码供参考

var isDown = false;
var startCoords = [];
var last = [0, 0];

    canvas.onmousedown = function(e){
        isDown = true;

        startCoords = [
            e.offsetX - last[0],
            e.offsetY - last[1]
       ];
    };

    canvas.onmouseup  = function(e){
        isDown = false;

        last = [
            e.offsetX - startCoords[0], // set last coordinates
            e.offsetY - startCoords[1]
        ];
        //tooltipFunc(e);   

    };
    canvas.onmousemove = function(e){   
                tooltipFunc(e); //tooltip function
                if(!isDown) return;         
                var x = e.offsetX;              
                var y = e.offsetY;
                context.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]);
                draw1(scaleValue);//redrawing image on canvas while panning image                   
        }

    function tooltipFunc(e){    
        var translationX, translationY;
        var r = canvas.getBoundingClientRect(),
                    x = e.clientX - r.left,
                    y = e.clientY - r.top,
                    i = 0,
                    r,
                    inTooltip = false;

        if((typeof startCoords[0] === 'undefined' || startCoords[0] === 'NaN') && (typeof startCoords[1] === 'undefined' || startCoords[1] === 'NaN')){         
                for (; r = dataJSON[i]; i++) {              
                    if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(20/scaleValue)) {
                        clearTooltip();
                        showTooltip(e.clientX, e.clientY, i);
                        inTooltip = true;
                    }
                }
        }
        else{           
            for (; r = dataJSON[i]; i++) {                  
                translationX = parseInt(x) - parseInt(startCoords[0]);
                translationY = parseInt(y) - parseInt(startCoords[1]);

                    if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY)  + parseInt(20/scaleValue)) {

                    clearTooltip();             
                    var newX = e.clientX - translationX;
                    var newY = e.clientY - translationY
                    showTooltip(newX, newY, i); 
                    inTooltip = true;

                }

            }
        }
    }