Draw line from one dot to another using mouse event

Question

How can I use HTML5 canvas to simply connect two dots with one line using mouse? where I would click on the first dot and drag the mouse creating a line until it connects to the second dot. I have been using x/y offset to follow the mouse but drawing a line is where I need help in.

Data array is the two dots

$scope.data = [
     [192,27]
    ,[183,55]
  ];


  function drawDot(event) {
      if(dragging){

            context.lineTo(event.offsetX, event.offsetY);
            context.stroke();
            context.beginPath();
            context.arc(event.offsetX, event.offsetY,5, 0, Math.PI*2);
            context.fill();
            context.beginPath();
            context.moveTo(event.offsetX, event.offsetY);

        }
    }

  function engage(){
      dragging = true;
      drawDot(event);
  }

  function disengage(){
      dragging = false;
      context.beginPath(); 
  }

function init(){
    canvas.addEventListener("mousedown",engage);
    canvas.addEventListener("mouseup",disengage);
    canvas.addEventListener("mousemove",drawDot,false);
}

I would really like to help with this man. But you need to provide the code you have tried so far. When you ask questions like this you are just asking people to do the work for you from scratch. — QBM5, Feb 16 '16 at 14:46

score 2 · Accepted Answer · answered Feb 16 '16 at 16:26

2

I am seeing a few things wrong here. Look at my example. I believe that is what you are looking for.

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


var startX = 0;
var startY = 0;

  function drawDot(event) {
      if(dragging){
      context.clearRect(0,0,canvas.width, canvas.height)
      context.beginPath();
      context.moveTo(startX, startY);
      context.lineTo(event.offsetX, event.offsetY);
       context.arc(event.offsetX, event.offsetY,5, 0, Math.PI*2);
      context.stroke();
      context.closePath();
        }
    }

  function engage(event){
      dragging = true;
      startX = event.offsetX;
      startY = event.offsetY;
  }

  function disengage(){
      dragging = false;
  }


canvas.addEventListener("mousedown",engage);
canvas.addEventListener("mouseup",disengage);
canvas.addEventListener("mousemove",drawDot,false);

<canvas id="canvas" style="margin: 10px; background: blue"></canvas>

answered Feb 16 '16 at 16:26

QBM5

2,778
2
17
24

1

Looks like this will help the questioner :-) You might want to listen for mouseout events and handle with `disengage`. That will keep the line from being "glued" to the mouse if the mouse is released outside the canvas during a draw. – markE Feb 16 '16 at 16:47
Thank you QBM5, thats great. – Tonor Feb 16 '16 at 20:22
On the above solution how would I be able to start drawing from a specific start point? lets say I want to start drawing from [x:50 y:60] I have a dot at this position and want to start drawing from this position – Tonor Mar 02 '16 at 13:11
Just manually set the startX and startY to something other then the event.offsetX/Y and the line will start from there – QBM5 Mar 02 '16 at 15:44
Thanks am not sure if this is possible, draw smooth lines from a start point, rather than straight line as per your solution. – Tonor Mar 02 '16 at 16:17
I dont know what the difference is between a smooth line and a straight line. If you are talking about anti aliasing, look at this post http://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing – QBM5 Mar 02 '16 at 19:00
Sorry should have made it more clear, I was thinking of drawing by following the mouse, eg curves – Tonor Mar 03 '16 at 09:59
oh, you would just need to take the position of the mouse at a set interval and store the position to an array at hen in the draw method draw all the points of the array. To make things smooth you may want to look into bezier curves – QBM5 Mar 03 '16 at 14:10
Could you please explain a bit more on this, I have managed to draw by following the mouse but want to start from a specific point and then start drawing from there, at the moment I can draw from anywhere in my canvas which I don't want want. I want to start from a specific point. – Tonor Mar 07 '16 at 21:13
If I could post eye roll emoji's here I would. From the code I gave you the task is extremely simple to change the start point, but I guess explaining it isnt going to do so here, I coded it for you https://jsfiddle.net/fy924pdp/. Please note I only had to change 4 lines of code to give you your new answer. Your welcome – QBM5 Mar 07 '16 at 21:51

Draw line from one dot to another using mouse event

1 Answers1