JavaScript draw a circle on mouse click - cordinates don't match
<p>I'm writing a simple script where the user clicks anywhere in a canvas and there appears a circle. </p>

<p>The script works but not correct. Somehow the cordinates where the click event happens and the circle center don't match. Any ideas why? </p>

<p>Here is the code : </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        $('#status2').html(x +', '+ y); 
   }); 
})  

&lt;/script&gt;
&lt;body&gt; 
    &lt;h2 id="status2"&gt;0, 0&lt;/h2&gt;
    &lt;canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special"&gt;

    &lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
