Position of mouse on image

Question

I have two images: 1. normal image 2. same image with the ability to zoom. I have 4 draggable shapes (A,B,C,D) on second image (image with the ability to zoom). I want to display position of mouse on normal image (with draw a shape (canvas3)) when the position of A/B/C/D shapes changed on the zoomed image. I used the following code but it does not show correct position. In fact, I want user can see position of mouse.

property int xwheel: 0
property int ywheel: 0    
property alias source :image.source
id:mywin
property int highestZ: 0
property real defaultSize: mywin.width
property real surfaceViewportRatio: 1.5

ScrollView {
    anchors.fill: parent
    flickableItem.interactive: true
    frameVisible: true
    highlightOnFocus: true
    style: ScrollViewStyle {
        transientScrollBars: true
        .........
    }

    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: parent.width
        contentHeight: parent.height

        Rectangle {
            id: photoFrame
            width: parent.width
            height: parent.height                
            scale:defaultSize / parent.width
            Behavior on scale { NumberAnimation { duration: 200 } }
            Behavior on x { NumberAnimation { duration: 200 } }
            Behavior on y { NumberAnimation { duration: 200 } }
            smooth: true
            antialiasing: true

            Image {
                id:image
                anchors.fill: parent
                fillMode: Image.PreserveAspectFit
                smooth: true
            }
            PinchArea {
                anchors.fill: parent
                pinch.target: photoFrame
                pinch.minimumRotation: -360
                pinch.maximumRotation: 360
                pinch.minimumScale: 0.1
                pinch.maximumScale: 10
                pinch.dragAxis: Pinch.XAndYAxis
                property real zRestore: 0
                onSmartZoom: {
                    .....
                }

                MouseArea {
                    id: dragArea
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: photoFrame
                    scrollGestureEnabled: false 
                    onPressed: {
                        photoFrame.z = ++mywin.highestZ;
                    }
                    onWheel: {
                        ...
                }
            }
            Point {
                id: pointA                    
                onDragged: {
                    xwheel=pointA.x;
                    ywheel=pointA.y;
                    canvas3.requestPaint()
                }
            }
            //Point B
            //Point D
            //Pint C
        }
    }
}
Image {
    id:mainimage
    width: parent.width/4
    height: parent.height/4
    smooth: true
    source: image.source
    Canvas {
        id: canvas3            
        width: parent.width
        height: parent.height
        onPaint: {
            var context = getContext("2d");
            // Make canvas all white
            ......              
            context.beginPath();
            //Style
            .......                
            context.moveTo(xwheel/4, ywheel/4);               
            context.arc(xwheel/4, ywheel/4, 5, 0, 2*Math.PI, true)
            context.fill();
            context.stroke();
        }
    }
}