Capturing user input for drawing the line of symmetry on a certain shape

How would you capture the user input regarding the开发者_运维问答 line of symmetry for a certain image (rendered either as <img src=""> or on a canvas.

(e.g. the image could be the candian flag or the japanese flag or the south korean flag. The user would be asked to plot the line of symmetry on it). How do we go about capturing this information.

A couple of options, dedicated to the least common denominator:

1): Javascript (jquery for brevity)

$(document).ready(function(){
    $('#target-image').click(function(evt){
        var pX = evt.clientX - $(this).offset().left,
            pY = evt.clientY - $(this).offset().top;
       // do calcs. 
    });
});

2). Server side Image Map (somewhat antiquated... but more forgotten, I'd say):

HTML:

<a href="handler.php"><img src="foo.png" ismap="ismap" /></a>

PHP:

<?php
  if (array_key_exists($_REQUEST['x']) && (array_key_exists($_REQUEST['y']))
  {
     $pX = intval($_POST['x'],10);
     $pY = intval($_POST['y'],10);
     // do calcs.
  }

added comment -- I think the 2nd works. If nothing else, the x/y data is certainly in the query string.