I use canvas as a background for a certain div . Clicking on the "button" displays additional objects and canvas . Using jQuery, I get the position of these objects in pixels and draw a line from the object to the “button” on the canvas. The code works fine for the very first example, but when you click on the following "button" part of the code is ignored:

 target.closest(".contain").find(".servers .object").each(function(){ ctx.moveTo(pos_x, pos_y_1); ctx.lineTo(pos_x, pos_y_2); pos_x += width; });

Those. he does not find "objects" and does not draw. I just can not understand what it is connected with. To make it clearer, I bring all the code here: http://codepen.io/anon/pen/xgGGoN

    1 answer 1

    Understood. The problem was not in selectors, but in return values. Because .position returns coordinates relative to the document. I assumed that the return value occurs relative to the parent element. So I tried to draw a line outside of canvas, and of course it was not displayed.

    Read the documentation and do not disgrace. Link to documentation: https://api.jquery.com/position/