Как нарисовать линии HTML5 Canvas с учетом пользовательского ввода точек X,Y?

Я пытаюсь построить модель плана этажа в Canvas.В настоящее время у меня есть изображение сетки на холсте, и у пользователей есть возможность рисовать линии, щелкая и перетаскивая мышь. Но это не гарантирует прямых линий.

Могу ли я в любом случае предоставить поля ввода на html-странице, чтобы пользователи могли вводить начальные и конечные координаты x и y строк и обновлять их в коде холста? Я новичок, когда дело доходит до JS /AJAX, поэтому любая корректировка приветствуется :)

Прямо сейчас это раздел, который диктует, как рисуются линии:

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

Я подозреваю, что он включает в себя изменение следующего кода:

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