$("#canvas").click(function(e){ getPosition(e); }); var pointSize = 3; function getPosition(event){ var rect = canvas.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; drawCoordinates(x,y); } function drawCoordinates(x,y){ var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillStyle = "#ff2626"; // Red color ctx.beginPath(); ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); ctx.fill(); }
<p> Draw points in the hen ! Remember this example uses a method that will work in almost all devices. Even if you make zoom in the page, the points will be rendered correctly according to the image and canvas size.<br> Have fun !. This example uses jQuery </p> <br> <canvas id="canvas" width="690" height="651" style="cursor:crosshair;background:url(http://www.mundoanimalia.com/images/articles/66/58/06/7f6ffaa6bb0b408017b62254211691b5/gallina.jpg)"></canvas>