Cómo dibujar líneas de Canvas en HTML5 con la entrada de puntos X, Y del usuario?

Question

Estoy tratando de construir un modelo de plano de piso en Canvas. Actualmente tengo una imagen de cuadrícula en mi lienzo y tengo la capacidad para que los usuarios dibujen líneas haciendo clic y arrastrando su mouse. Pero esto no garantiza las líneas rectas.

¿De todos modos puedo proporcionar campos de entrada en la página html para que los usuarios ingresen el comienzo y el final de las coordenadas xey de las líneas, y lo actualicen en mi código de lienzo? Soy un principiante cuando se trata de JS/AJAX, por lo que cualquier ayuda extra se agradece :)

En este momento, esta es la sección que dicta cómo se ven inmersos las líneas:

$(document).ready(function() { 

    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext("2d"); 

    if(canvas.getContext) { 
     $('#canvas').mousedown(function (evt) { 
      var offset = $('#canvas').offset(); 
      context.beginPath(); 
      context.moveTo(20, 20); 
     }); 

     $(document).mousemove(function(evt) { 
      var offset = $('#canvas').offset(); 
      context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top); 
      context.stroke(); 
     }).mouseup(function() { 
      $(document).unbind('mousemove'); 
      $(document).unbind('mouseup'); 
     }); 

     $('#clearcanvas').click(function() { 
      context.clearRect(0, 0, 600, 580);  
     }); 
    } 
}); 

sospecho que implica la modificación siguiente código:

context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top); 

Answer 1

Muy simplemente se podría usar 4 campos de entrada y tomar el valor de cada uno cuando se pulsa un botón

button.addEventListener('click', function() { 
    ctx.beginPath(); 
    ctx.moveTo(x1.value, y1.value); 
    ctx.lineTo(x2.value, y2.value); 
    ctx.stroke(); 
}, false); 

http://jsfiddle.net/TeGGx/