draggable property doesn't work with drawLine about jcanvas HOT 9 CLOSED

var sensorId = "newSensor";
var sensorXCoords = [ 100, 200, 200, 100 ];
var sensorYCoords = [ 100, 100, 200, 200 ];
var verticesNumber = 4;
var ball = {
            layer : true,
            group : sensorId,
            fillStyle : "#FF0000",
            width : 15,
            height : 15,
            draggable : true,
            bringToFront : true,
            dragstop : onBallDrag,
            drag : onBallDrag
};

for ( var p = 0; p < verticesNumber; p += 1) {
  ball["name"] = sensorId + "Ball" + p;
  ball["x"] = sensorXCoords[p];
  ball["y"] = sensorYCoords[p];
  $("canvas").drawEllipse(ball);
}

var poly = {
  layer : true,
  name : sensorId + "SensorArea",
  group : sensorId,
  fillStyle : "#FF2222",
  opacity : 0.3,
  rounded : true,
  draggable: true,
  cursor: "move",
  dragstart : function(layer) {
  startX = layer.mouseX;
  startY = layer.mouseY;
},
    drag : function(layer) {
      var dx, dy, tempx, tempy, newx, newy;
      var tempx1, tempy1, tempx2, tempy2;
      dx = layer.mouseX - startX;
      dy = layer.mouseY - startY;
      for ( var p = 0; p < verticesNumber; p += 1) {
        tempx = $("canvas").getLayer(sensorId + "Ball" + p).x;
        tempy = $("canvas").getLayer(sensorId + "Ball" + p).y;
        newx = tempx + dx;
        newy = tempy + dy;
        $("canvas").setLayer(sensorId + "Ball" + p, {
                             x : newx,
                             y : newy
                          });
      }
      startX = layer.mouseX;
      startY = layer.mouseY;

    }
};

for ( var p = 0; p < verticesNumber; p += 1) {
  poly["x" + (p + 1)] = sensorXCoords[p];
  poly["y" + (p + 1)] = sensorYCoords[p];
}

$("canvas").drawLine(poly);

function onBallDrag(layer) {
    var sensorId = layer.group;
    updateSensor(sensorId);
}
function updateSensor(sensorId) {
    var polyLayer = $('canvas').getLayer('newSensorSensorArea');
    var updatedSensorXCoords = new Array();
    var updatedSensorYCoords = new Array();
    var coords = getSensorCoordsFromSensorId(sensorId);
    updatedSensorXCoords = coords.sensorXCoords;
    updatedSensorYCoords = coords.sensorYCoords;
    // The fix to the issue is reflected here
    $("canvas").setLayer(sensorId + "SensorArea", {
        x1 : updatedSensorXCoords[0] - polyLayer.x,
        y1 : updatedSensorYCoords[0] - polyLayer.y,
        x2 : updatedSensorXCoords[1] - polyLayer.x,
        y2 : updatedSensorYCoords[1] - polyLayer.y,
        x3 : updatedSensorXCoords[2] - polyLayer.x,
        y3 : updatedSensorYCoords[2] - polyLayer.y,
        x4 : updatedSensorXCoords[3] - polyLayer.x,
        y4 : updatedSensorYCoords[3] - polyLayer.y
    });
}

function getSensorCoordsFromSensorId(sensorId) {

    var p;
    var sensorXCoords = new Array();
    var sensorYCoords = new Array();
    for (p = 0; p < verticesNumber; p++) {
        sensorXCoords[p] = $("canvas").getLayer(sensorId + "Ball" + p).x;
        sensorYCoords[p] = $("canvas").getLayer(sensorId + "Ball" + p).y;
    }
    return ({
        sensorXCoords : sensorXCoords,
        sensorYCoords : sensorYCoords
    });
}