Draw points on canvas with image

How to draw points on canvas with a background image

by firegroove

HTML

<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>

JavaScript

$("#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();
}