Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <div>
            <canvas id="drawCanvas" width="550" height="200"></canvas>
            <script type="text/javascript">
​
                function start() {
                    var drawCanvas = document.getElementById("drawCanvas");
                    var ctx = drawCanvas.getContext('2d');
                    drawCanvas.addEventListener("mousedown", getCoordinate, false);
                }
​
                function getCoordinate(evt) {
                    var x = new Number();
                    var y = new Number();
                    var drawCanvas = document.getElementById("drawCanvas");
​
                    if (evt.x != undefined && evt.y != undefined) {
                        x = evt.x;
                        y = evt.y;
                    }
                    else //it's a Firefox method which is use to get the position
                    {
                        x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                        y = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                    }
​
                    x = x - drawCanvas.offsetLeft;
                    y = y - drawCanvas.offsetTop;
                    
                    alert('Mouse Coordinate-> x: ' + x + ' | y: ' + y);
                }
​
                document.addEventListener("DOMContentLoaded", start, false);
            </script>
        </div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
igurugyanpro
0viewers