Geek Answers Handbook

How to draw HTML5 canvas lines taking into account user input of X, Y points?

I am trying to build a plan model in Canvas. Currently, I have a grid image on my canvas and users have the option to draw lines by clicking and dragging them with the mouse. But this does not guarantee straight lines.

In any case, can I provide input fields on the html page so that users enter the start and end coordinates of x and y lines and do they update my code on the canvas? I start when it comes to JS / AJAX, so any corrective help is appreciated :)

Right now, this is the section that determines how the lines are drawn:

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

I suspect this is due to a code change:

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

4

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/

+5

More articles:


All Articles