title: Make canvas line show
body: <p>Ok, here is something simple, I hope. I've a div container in which I can click and what I'm trying to do is to create two perpendicular lines which cross each other where I've clicked. So far I've written those:</p>
  
  <pre><code> #fr{
    float: right;
    margin-top: 5%;
    height: 720px;
    width: 1280px;
    position: relative;
    background-image: url(blueboard.jpg);
    border: 1px solid black; 
    clear:none;
  
  }
  canvas{
    border:1px solid red;
    float: right;
    height: 720px;
    width: 1280px;
    clear:none;
  }//css part, I actually place the canvas on top of my div
  
  //and on html...
    &lt;canvas id="line"&gt;&lt;/canvas&gt;
  
  //js
  function saveOO(e){
      var xo, yo;
      xo=e.clientX;
      yo=e.clientY; 
      ...
  
      document.getElementById("saved").innerHTML="The (0;0) = " +"("+xo+";"+yo+")";
      document.getElementById("ball").style.left=xo+'px';
      document.getElementById("ball").style.top=yo+'px';
      xylines(xo, yo);  
      ...;
    }
  function lines(xo, yo){
     var xo, yo, xl, xline, yl, yline, Dx, Dy, a, b, c, d, e;
     xo=xo;
     yo=yo;
     a=$("#fr").position();
     b=$("#fr").width();
     c=$("#fr").height();
     Dy=a.top+100;
     Dx=a.left;
     d=Dx+b;
     e=Dy+c; 
  
     xline = document.getElementById("line");
     xl=xline.getContext("2d");
     xl.beginPath();
     xl.moveTo(Dx,yo);
     xl.lineTo(d,yo);
     xl.lineWidth = 15;
     xl.stroke();
  
     yline = document.getElementById("line");
     yl=yline.getContext("2d");
     yl.beginPath();
     yl.moveTo(xo,Dy);
     yl.lineTo(xo,e);
     yl.lineWidth = 15;
     yl.stroke();}
  </code></pre>
  
  <p>I have, as well, checked whether all variables assign a value and everything is good with that. The crossing point should be exactly where the blue ball is, it also positions on the place where it's clicked. As you can see on the image no lines show, even if I remove the blue background. Please, help me, maybe something is missing. I'm looking forward to your answers.
  :)<a href="https://i.stack.imgur.com/bV9EF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bV9EF.png" alt="enter image description here"></a> </p>
  
  <p>P.S. Dy is Y of the top left corner, Dx respectively X of the top left corner</p>