Get the coordinates of two different places on an HTML canvas

Question

Purpose of my code:

• Draw a small rectangle on the HTML canvas when the user clicks on the canvas. The rectangle should have a small number representing the number of rectangles made by the user.

• The user should be able to connect any two rectangles using a straight line. (Preferably, simply by clicking the left mouse button and selecting the mouse from the first rectangle to the second rectangle)

Approach and my attempt

As you can see in this jsFiddle , I was able to do the first part above very well. When you click on the canvas, a rectangle with a number inside it is made. But I really don't know about the second part.

How can I connect a user to two made rectangles? I want the connection to be done only if there is a rectangle (so I will need to store the coordinates of each rectangle that was made, which is good, since I can use an array for this). Basically, I just want to check if the duck was in one place and the other with the mouse. How do I get these two different coordinates (one from mousedown and the other mouseup) and draw a line between them? I gave Fiddle above, but still here is my jquery:

$(function () { var x, y; var globalCounter = 0; $('#mycanvas').on("click", function (event) { x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; x -= mycanvas.offsetLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; y -= mycanvas.offsetLeft; // alert("x:"+x+"y: "+y); drawRectangle(x, y); }); function drawRectangle(x, y) { var acanvas = document.getElementById("mycanvas"); var context = acanvas.getContext("2d"); context.strokeRect(x, y, 25, 25); globalCounter++; writeNo(x, y, globalCounter); } function writeNo(x, y, n) { var acanvas = document.getElementById("mycanvas"); var context = acanvas.getContext("2d"); context.font = "bold 14px sans-serif"; context.fillText(n, x + 8, y + 12.5); } }); 

So the main question: connecting two made rectangles with mousedrag

How do I achieve this? Thanks.

Answer 1

How about this: http://jsfiddle.net/4jqptynt/4/

Ok, first I did a little refactoring for your code to make things simpler. It’s just things like putting code that gets the coordinates of the canvas into its own function, and caching some variables (like canvas context) in the outer area of ​​the function. Oh, and we define the dimensions of the rectangle as constants, because we will use the same numbers in several different places.

As you said, the first thing we need is to track existing rectangles using the rects array (easy enough to do in drawRectangle ). Then we need a function to check if some pair of coordinates is inside some rectangle:

 function inRectangle(x, y) { for (var i = 0, l = rects.length; i < l; i++) { if ((x - rects[i].x) <= RECT_X && (y - rects[i].y) <= RECT_Y && (x - rects[i].x) >= 0 && (y - rects[i].y) >= 0) { return i; } } } 

where RECT_X and RECT_Y define the sides of the rectangle. If the coordinates exist inside some rectangle, then this will return the index of this rectangle in the rects array.

Then this is the case of checking whether the rectangle happened or not, noting that the inRectangle will only return a number if the mousedown event was inside the rectangle:

 $acanvas.on("mousedown", function (event) { var coords = getCoords(event), rect = inRectangle(coords.x, coords.y); if (typeof rect === "number") { dragStart = rect + 1; } else { drawRectangle(coords.x, coords.y); } }); 

if so, pay attention to which rectangle using dragStart , if you do not draw the rectangle as before.

Then, to complete the drag and drop, we need to bind the handler to mouseup :

 $acanvas.on("mouseup", function (event) { if (!dragStart) { return; } var coords = getCoords(event), rect = inRectangle(coords.x, coords.y); if (typeof rect === "number") { drawConnection(dragStart - 1, rect); } dragStart = 0; }); 

If a drag has not been started, it does nothing. If the coordinates are not within the rectangle, then it does nothing but reset dragStart . If, however, it is inside the rectangle, then it draws a connecting line:

 function drawConnection(rect1, rect2) { context.strokeStyle = "black"; context.lineWidth = 1; context.beginPath(); context.moveTo(rects[rect1].x + RECT_X/2, rects[rect1].y + RECT_Y/2); context.lineTo(rects[rect2].x + RECT_X/2, rects[rect2].y + RECT_Y/2); context.stroke(); context.closePath(); }