html5 canvas dibujar dos punto y unirlos con una linea

[Alexis88]

Claro. Tomas las coordenadas del puntero del mouse por cada vez que el usuario haga un clic, las asignas a dos variables que representarán los puntos X y Y y cuando tengas los otros dos puntos, dibujas la línea. Para esto, te puede apoyar usando una variable como contador, que irá contando los clics, entonces, para los puntos iniciales, el valor del contador debe ser impar, mientras que para los finales, debe ser par. Teniendo las coordenadas iniciales y finales, dibujas la línea.

Código HTML:

<img src = "imagen.jpg" />
<canvas width = 400 height = 300></canvas>
 

Código CSS:

img, canvas{
    position: absolute;
}
 

Código Javascript:

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    cont = 0,
    xIni, yIni, 
    xFin, yFin;
 
window.addEventListener("click", function(e){
    if (++cont % 2 !== 0){       
        xIni = e.clientX;
        yIni = e.clientY;
    }
    else{
        xFin = e.clientX;
        yFin = e.clientY;
        
        context.moveTo(xIni, yIni);
        context.lineTo(xFin, yFin);
        context.lineWidth = 2;
        context.strokeStyle = "white";
        context.stroke();
    }
}, false);
 

DEMO

Es importante que tanto a la imagen como al elemento canvas les des una posición absoluta en la hoja de estilos para que las líneas que se vayan dibujando, queden sobre la imagen, además, las medidas del canvas deben corresponder con las de la imagen, por ejemplo, en el demo que adjunto, la imagen es de 400x300 píxeles, por eso le doy esa medida al canvas.

Saludos