Insert Mouse Click Coordinates into text input box with Javascript

Question

I have an HTML5 Canvas on my page along with two text input fields. When the user clicks on the canvas (and only within the canvas), I want to echo the mouse coordinates into the text input boxes on the page. Help?? If you need more details, please ask.

I found this from a link in the comments below, but can't seem to get it to work?:

Text inputs:

<input type="number" name="MouseX" id="text_x" min="10" max="600" />

 <input type="number" name="MouseY" id="text_y" min="0" max="480" />

Javascript:

<script>
function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
        totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
coords = canvas.relMouseCoords(event);
document.Show.MouseX.value = coords.x;
document.Show.MouseY.value = coords.y;

</script>

UPDATE Here's the code that worked for me: HTML:

<div id="canvasContainer" onclick="point_it(event)">
                          <canvas id="canvas" width="640" height="500">
                            <p>Unfortunately, your browser is currently unsupported by our web 
                              application.  We are sorry for the inconvenience. </p>
                           </canvas>

And JS:

<script language="JavaScript">
// Get mouse click coordinates within canvas element
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvasContainer").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvasContainer").offsetTop;
    document.getElementById("canvas").style.left = (pos_x-1) ;
    document.getElementById("canvas").style.top = (pos_y-15) ;
    document.getElementById("canvas").style.visibility = "visible" ;
    document.getElementById("text_x").value = pos_x;
    document.getElementById("text_y").value = pos_y;
}
</script>

You want the mouse coordinates relative to the canvas or to the document? — j08691, Apr 02 '12 at 15:34
You can find something VERY similar to what you want -- but not using an HTML5 Canvas -- at http://www.javascriptsource.com/page-details/mouse-coordinates.html. — Roy Dictus, Apr 02 '12 at 15:38
@JoshLee I found this http://www.w3schools.com/html5/html5_canvas.asp if you scroll down to the canvas example, they display the coordinates. I haven't really tried anything because I don't know where to start — adamdehaven, Apr 02 '12 at 15:39
@j08691 I'd like the mouse coordinates relative to the canvas. So for example, 0,0 would be the top left corner of the canvas. — adamdehaven, Apr 02 '12 at 15:39
possible duplicate of [How do I get the coordinates of a mouse click on a canvas element?](http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element) — Josh Lee, Apr 02 '12 at 15:44
@Xeon06 - That's the code I have at the top of this page in my question, but it's not working for me? I need the JS to constantly update the values in the text inputs when the canvas is clicked — adamdehaven, Apr 02 '12 at 15:59
@adamdehaven oops sorry, didn't notice that. Lemme check it out and answer your question. — Alex Turpin, Apr 02 '12 at 16:01

score 1 · Accepted Answer · answered Apr 02 '12 at 16:06

1

You need to add a click event and call your function with the event arguments.

document.getElementById("canvas").onclick = function(event) {
    var coords = canvas.relMouseCoords(event);
    document.getElementById("text_x").value = coords.x;
    document.getElementById("text_y").value = coords.y;
}

Live example

answered Apr 02 '12 at 16:06

Alex Turpin

46,743
23
113
145

I actually used code a little different than this, but set up similarly. I updated the question at the top to include my final code. Can you check it to make sure there aren't any errors? And, is there a way to only register a click within the canvas element? – adamdehaven Apr 02 '12 at 17:30
@adamdehaven There are no errors but this is highly bug prone. Don't use your code, use the one I gave you, it will guarantee you will always get the proper coordinates. My example shows how to register the click solely with the canvas element. – Alex Turpin Apr 02 '12 at 17:36
When I use your code, it works fine in the jsfiddle, but does not update the text input boxes on my actual site... ? Can you post the full code implemented with what I have at the top (meaning, using my input names and such) – adamdehaven Apr 02 '12 at 17:44
@adamdehaven I am using your input names. The only difference was that I removed the max/min and changed the type to "text". I've changed the input's type back to "number" and it still works http://jsfiddle.net/gAnQq/1/ – Alex Turpin Apr 02 '12 at 18:31

Insert Mouse Click Coordinates into text input box with Javascript

1 Answers1

Linked