title: draw line on canvas between dynamically created divs using JQuery
body: <p>I want to draw lines on canvas between dynamically made divs using JQuery. Goal is to look  something like the jsplumbs flow chart. The Lines can stay static (the divs are draggable, tho). There should be one Starting Point(the circle) with 4 anchor divs and the dynamically created divs(the boxes) each with 4 anchor points. The lines should be created, once the 2  anchor points from different parent are double clicked.
  problem:
  The drawing after the double-click is not correct. The lines don't appear in the right place. they also show in a wrong direction. It seems ,that only lines with 45 degrees difference can be created.</p>
  
  <p>Can anyone tell me a functional solution?</p>
  
  <p>fiddle 
  <a href="http://jsfiddle.net/marcoma/23HuF/" rel="nofollow">http://jsfiddle.net/marcoma/23HuF/</a></p>
  
  <p>the html code:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;input id="btn1" type="button" value="create div" /&gt;    
  
      &lt;div id="circle1" class="startpoint"&gt;&lt;/div&gt;
  
      &lt;canvas id="theCanvas" width="800px" height="500px"&gt;&lt;/canvas&gt;
  
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="divmaker.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>the Jquery code:</p>
  
  <pre><code>var divCount = 0;
  var canvas = document.getElementById("theCanvas");
  var context = canvas.getContext('2d');
  var lineCounter = 0;
  var lineList = [];
  var canOffLeft = canvas.offsetParent.offsetLeft;
  var canOffTop = canvas.offsetParent.offsetTop;
  
  
  $("#btn1").click(function(){
      $("&lt;div/&gt;", {
          id: "div" + divCount,
          class: "dynamicDiv",
  
      }).draggable().appendTo("body").click(function(){      
          $(this).toggleClass("highlight")    
      });
      $('&lt;div/&gt;', {
          id: "left",
          class: "anchorPoint",
      }).appendTo("#div" + divCount).dblclick(drawLine);
      $('&lt;div/&gt;', {
          id: "top",
          class: "anchorPoint",
      }).appendTo("#div" + divCount).dblclick(drawLine);
      $('&lt;div/&gt;', {
          id: "right",
          class: "anchorPoint",
      }).appendTo("#div" + divCount).dblclick(drawLine);
      $('&lt;div/&gt;', {
          id: "bottom",
          class: "anchorPoint",
      }).appendTo("#div" + divCount).dblclick(drawLine);
      divCount++;
  });
  
  
  function init(){
      canvas.width = 800;
      canvas.height = 500;
  
  }
  
  
  function getPosition(element){
      var rect = document.getElementById(element.id).getBoundingClientRect();
      var x = rect.left-canOffLeft+(rect.width/2);
      var y = rect.top-canOffTop+(rect.height/2);
        return[x,y];
  }
  
  function drawLine(){
      lineCounter = lineCounter+1;
  
      if(lineCounter==1){
          xy1 = getPosition(document.getElementById(this.id));
          element = document.getElementById(this.id);
      }
  
      if(lineCounter==2){
          var xy2 = getPosition(document.getElementById(this.id));
          context.beginPath();
          context.moveTo(xy1[0],xy1[1]);
          context.lineTo(xy2[0],xy2[1]);
          context.strokeStyle= "#000";
          context.fill();
          context.closePath();
          context.stroke();
          console.log(xy1,xy2);
          lineCounter = 0;
      }
  }
  
  init();
  </code></pre>
  
  <p>and the CSS code:</p>
  
  <pre><code>body{
      width: 1200px;
      height: 800px;
      font-family: sans-serif;
  
  }
  
  
  #theCanvas {    
  
      z-index: 1;
      border:1px groove rgba(187,187,187,0.79);
      box-shadow: 11px 11px 200px #000000;
      text-align: center;
      margin-left: 70px;
      margin-top: -300px;
  
  }
  
  .dynamicDiv {
      z-index: 2;
      width:200px;
      height:100px;
      border:solid 1px #c0c0c0;
      background-color:#e1e1e1;
      font-size:11px;
      font-family:verdana;
      color:#000;
      padding:5px;
      margin: 0px auto;
      text-align: center;
      }
  
  #btn1 {
      margin-top: 0px;
      margin-left: 0px;
  }
  
  .highlight{
      background-color: cyan;
  }
  
  .startpoint{
      -webkit-border-radius: 999px;
      -moz-border-radius: 999px;
      border-radius: 999px;
      width: 50px;
      height: 50px;
      background: yellow;
      border: 1px solid black;
      margin-left: 90px;
      margin-top: 200px;
  }
  
  
  .anchorPoint{
       width: 10px;
      height: 10px;
  
      border: 1px solid black;
  
  
  }
  
  #left{
  
  
      margin-left: -11px;
      margin-top: 45px; 
  }
  
  #right{
  
      margin-left: 199px;
      margin-top: 45px;
  }
  
  #top{
  
      margin-top: -68px;
      margin-left: 100px;
  }
  
  #bottom{
      margin-top: 42px;
      margin-left: 100px; 
  }
  </code></pre>