绘制在鼠标位置折叠的水平和垂直线

Question

I am tying to draw horizontal and vertical line collapsing at mouse position. I am facing two problems

1. Horizontal line is not showing up. Seems like some CSS issue but could not figure out.
2. While moving mouse the redrawing of lines is not smooth. Its cluttering. Anyway I can avoid that?

fiddle

Code:

var element = document.getElementById('box');

var drawLines = function(event) {
  var x = event.pageX;
  var y = event.pageY;

  var straightLine = element.querySelector('.straightLine');
  var hrLine = element.querySelector('.hrLine');

  var slTrans = 'translate(' + x + 'px, 0px)';
  var hrTrans = 'translate(0px, ' + y + 'px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.appendChild(straightLine);
  }
  straightLine.style.transform = slTrans;

  if(!hrLine) {
     hrLine = document.createElement('div');
     hrLine.style.height = "2px";
     hrLine.classList.add('hrLine');
     hrLine.style.width = '100%';
     element.appendChild(hrLine);
  }
  hrLine.style.transform = hrTrans;
}

element.addEventListener('mousemove', function(event) {
   drawLines(event);
});

element.addEventListener('mousedown', function(event) {
   drawLines(event);   
});

element.addEventListener('mouseup', function(event) {
   drawLines(event);
});

element.addEventListener('mouseout', function(event) {
   drawLines(event);
});

Answer 1

The horizontal line issue can be fixed with:

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
}

See updated fiddle .

EDIT
You can also use the following to smooth out the animation (you'll have to adjust the timespan to suit your needs:

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
    transition: transform .05s ease-in-out;
}

See updated fiddle and w3schools.com .