Cómo dibujar puntos (circulos) en un canvas con Javascript HTML5

El tag canvas es usado para dibujar gráficos dinamicamente usando Javascript. Este tag es solamente un contenedor para gráficos, así que debes usar un script para visualizar algo en el. En este artículo aprenderás a dibujar un punto en un canvas de acuerdo a la localización del click dado por el usuario.

Para comenzar crear un tag canvas en tu documento con el tamaño que desees, este tendrá el id canvas:

<!-- Tag canvas -->
<canvas id="canvas" width="690" height="651"></canvas>

Para dibujar puntos en un canvas cuando el usuario clickea en el necesitaremos manejar el evento click y obtener las coordenadas del click. Para obtener las coordenadas del mouse, relativas al canvas, podemos crear un método llamado getPosition que retornará las coordenadas en las que el mouse fue oprimido (x,y), basados en esta posición y la posicion del canvas, que podemos obtener usando el método getBoundingClientRect de la ventana.

// El evento click, puede ser obtenido como primer parametro del metodo Elemento.addEventListener(function(event){}); o en jQuery usando $("selector").click(function(event){});
function getPosition(event){
     var rect = canvas.getBoundingClientRect();
     var x = event.clientX - rect.left; // x == the location of the click in the document - the location (relative to the left) of the canvas in the document
     var y = event.clientY - rect.top; // y == the location of the click in the document - the location (relative to the top) of the canvas in the document
     
     // El método drawCoordinates va a usar las coordenadas para dibujar los puntos
     drawCoordinates(x,y);
}

Ahora, el método drawCoordinates va a dibujar el punto de acuerdo al lugar del canvas donde el usuario hizo click. Este recibe como primer parametro la coordenada X (horizontal) del canvas y como segundo parametro la coordenada Y (vertical) relativas al canvas. 

function drawCoordinates(x,y){
    var pointSize = 3; // Cambia el tamaño del punto
    var ctx = document.getElementById("canvas").getContext("2d");


    ctx.fillStyle = "#ff2626"; // Color rojo

    ctx.beginPath(); // Iniciar trazo
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Dibujar un punto usando la funcion arc
    ctx.fill(); // Terminar trazo
}

Puedes ver un ejemplo en vivo de los métodos anteriores en el siguiente Fiddle. Ve a la pestaña Result y observa su funcionamiento, dibuja muchos puntos en la gallina:

Este código es amigable con todas las resoluciones pues se mantiene lo más sencillo posible, incluso si haces zoom en el documento, las coordenadas se renderizarán correctamente. Que te diviertas !