html5 canvas dibujar dos punto y unirlos con una linea

[Montes28]

Hola amigos, es posible realizar con html5 - canvas lo siguiente:

tengo una imagen y requiero que el usuario seleccione solo dos puntos y que se dibuje una linea uniendo esos dos puntos.

la idea que tenia era colocar la imagen de fondo, colocar una transparencia y capturar los dos click y sus respectivas coordenadas, estoy bien o mal?

[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

[Montes28]

@Alexis88 gracias por responder, excelente tu aporte , solo tengo una pregunta porque no es exacto la linea que se traza, me explico yo señalo dos puntos y se traza la linea pero esa linea no queda exactamente donde señale los puntos

[Alexis88]

Siendo sincero, no lo sé, también había notado de los puntos de inicio y fin de las líneas, se marcan cerca a donde se dan los clics, pero no en los mismos lugares. Ojalá alguien que sepa más del tema pueda explicarnos esto.

[Montes28]

Alexis existe la manera de que se puedan borrar las lineas ?

[Alexis88]

Para limpiar un área del elemento <canvas>, existen los métodos clearRect y fillRect, los cuales son explicados en este interesante artículo.

Saludos

[caricatos]

Hola:

Sé poco sobre canvas, pero algo más sobre svg, y como el tema era sobre canvas no he contestado...

Al respecto de obtener puntos, para no tener problemas, en mi capturador de áreas: Capturar áreas en imágenes, he optado por poner la imagen en un input y enviar el formulario a un iframe, también se puede poner la imagen en un iframe en la coordenada 0,0, y la captura es trivial.

Para dibujar puntos con svg, se usa una etiqueta line, y como etiqueta se puede borrar con removeChild, u ocultarla con estilos...

La creación de tags en svg es muy fácil también...

Aunque no esté dando respuestas, espero que sea útil mi aporte.

Saludos