HTML 5 Canvas - получить реальную координату при масштабировании

Question

Я наконец достиг реализации масштабируемого и панорамирующего холста, используя этот код в качестве основы https://stackoverflow.com/a/3151987/5221943.Теперь мне нужно определить реальную координату, где пользователь щелкнул внутри холста.Я не знаю, как преобразовать координату страницы мыши в координату реального мира с учетом того, что пользователь уже увеличил или панорамировал холст.Любое предложение здесь?

Answer 1

Вот код для стробирования координат холста

Call the DumpInfo function in the html canvas tag like 
 <canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas>
Bellow two functions defined 
 <script type = "text/javascript" >
    function DumpInfo(event) {
        var info = document.getElementById("canvas");
    //info.innerHTML += event.type + ", ";
        var pos = getMousePos(info, event);
        alert(pos.x);
        alert(pos.y);
        }
        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
    </script>