canvas（html5）放大缩小 点击事件

Question

已实现点击事件。和移动鼠标，以鼠标为原点的放大缩小。可是经过放大和缩小后，点击就失效了。
请问在这种放大缩小的情况下还能怎样去实现点击呢？求思路！

例如：
给定的点击区域，当鼠标点击这区域是会打印提示

                x:1386,
                y:50,
                width: 120,
                height: 40

放大缩小

 canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                var pt = context.transformedPoint(lastX,lastY);
                context.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                redraw();
            }
        },false);

        、、、、、、
        var zoom = function(clicks){
            var pt = context.transformedPoint(lastX,lastY);
            context.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            zoomSize = factor;
            context.scale(factor,factor);
            context.translate(-pt.x,-pt.y);
            redraw();
        }

可是，经过放大缩小后，位于原本区域的图片，移动到其他地方，图形也扩大或缩小了，这时候的点击就等于失效了

Answer 1

这个我做过，我是将canvas的横纵坐标（多边形）中心点半径（圆）按比例缩放，用jQuery控制的，我是在地图上描区域，地图放大缩小，这个区域也和地图上的区域一起放大缩小位置还是在原来的地方