Draw Line With Html Canvas Element

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<meta charset="utf-8">
<title>JS Bin</title>

<script>
  // @martyndev
// Global vars
var _X     = "0";
var _Y     = "0";
var _XList = new Array(0);
var _YList = new Array(0);

function setSpace()
{
  if(_XList[_XList.length - 1] === -1) { return; }
  _XList.push(-1);
  _YList.push(-1);
}

function updateArray(x, y)
{
  _XList.push(x);
  _YList.push(y);
  _X = x;
  _Y = y;
}

function checkRoute()
{
  var xRoute = "";
  var yRoute = "";

  for(var i=0; i<_XList.length; i++)
  {
    xRoute = xRoute + ", "+ _XList[i];
  }

  for(i=0; i<_YList.length; i++)
  {
    yRoute = yRoute + ", "+ _YList[i];
  }


  $("#route").html("XRoute: " + xRoute + "<br /><br /> yRoute: " + yRoute);
}

function draw_line(fromX, FromY, ToX, ToY)
{
  var objContent = document.getElementById("content");
  var ctx        = objContent.getContext("2d");

  ctx.beginPath();
  ctx.lineWidth   = 2;
  ctx.strokeStyle = '#ff0000';
  ctx.moveTo(fromX, FromY);
  ctx.lineTo(ToX, ToY);
  ctx.stroke();
}

function draw_signature(e)
{
  //var objContent = document.getElementById("content");
  var objContent = $("#content")[0];
  var xClicked   = e.pageX - objContent.offsetLeft;
  var yClicked   = e.pageY - objContent.offsetTop;
  var coords     = "X: "+xClicked+", Y: "+yClicked;

  $("#coord").text(coords);

  updateArray(xClicked, yClicked);
}

function update_coords()
{
  var coords = "X: " + _X + ", Y: " + _Y + "";

  $("#coord").text(coords);

  for(var i=0; i<_XList.length-1; i++)
  {
    if(_XList[i+1] === -1) { i++; continue; }
    draw_line(_XList[i], _YList[i], _XList[i+1], _YList[i+1]);
  }

  window.setTimeout(update_coords, 50);
}

function mainEvent(e){
  // if it's not clicked, do not draw it (return)
  if(e.which === 0){ return; }
  draw_signature(e);
}
</script>

</head>

<body onLoad="update_coords()">
  <span id="coord">X: 0, Y: 0 (OffSetLeft: 0, OffSetTop: 0)</span>
  <br>

  <canvas id="content" width="310px" height="200px" style="border:1px solid green" onmousemove="mainEvent(event)" onmouseup="setSpace()">
  </canvas>

  <br />

  <input type="button" value="Check Route" onClick="checkRoute()"></input>
  <br>

  <span id="route"> </span>
</body>
</html>