HTML 5 Canvas - Get real coordinate when zooming

Question

I finally achieved to implement a zoomable and panning canvas using this code as a base https://stackoverflow.com/a/3151987/5221943 . Now I need to detect the real coordinate where the user clicked inside the canvas. I don't know how to convert the mouse page coordinate to the real world coordinate taking into account the user has already zoomed or panned the canvas. Any suggestion here?

Answer 1

Here the code for gating the coordinates of the canvas

 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>