Come disegnare le linee HTML5 Canvas date l'input dell'utente dei punti X, Y?

Question

Sto provando a costruire un modello di pianta in tela. Attualmente ho un'immagine della griglia nella mia tela e ho la possibilità per gli utenti di disegnare linee facendo clic e trascinando il mouse. Ma questo non garantisce le linee rette.

È comunque possibile fornire campi di input nella pagina html per consentire agli utenti di inserire le coordinate x e y iniziali delle linee e di aggiornarle nel mio codice canvas? Sono un principiante quando si tratta di JS/AJAX, quindi ogni aiuto è apprezzato correttiva :)

In questo momento, questa è la sezione che imponga come le linee vengono disegnate:

$(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);  
     }); 
    } 
}); 

ho il sospetto che implica modificare seguente codice:

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

Answer 1

Molto semplicemente si potrebbe utilizzare 4 campi di input e prendere il valore di ciascun quando viene premuto un tasto

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/