Código HTML:
Ver original
Código Javascript:
Ver original
var canvas = document.getElementsByTagName("canvas")[0], context = canvas.getContext("2d"), cont = 0, xIni, yIni, xFin, yFin; window.addEventListener("click", function(e){ var x; var y; if (e.pageX || e.pageY) { x = e.pageX - (e.pageX - e.layerX); y = e.pageY - (e.pageY - e.layerY); } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } if (++cont % 2 !== 0){ xIni = x; yIni = y; document.getElementById("x1").value = xIni; document.getElementById("y1").value = yIni; } else{ xFin = x; yFin = y; document.getElementById("x2").value = xFin; document.getElementById("y2").value = yFin; context.moveTo(xIni, yIni); context.lineTo(xFin, yFin); context.lineWidth = 2; context.strokeStyle = "white"; context.stroke(); } }, false); function myFunction() { document.getElementById("x1").value = 0; document.getElementById("y1").value = 0; document.getElementById("x2").value = 0; document.getElementById("y2").value = 0; }
en q