Kinteic JS Move Line to X/Y

HTML

<div id="container"></div>

JavaScript

var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 200
    });
    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({  // background shape
        x: 0, y:0, width: stage.getWidth(), height: stage.getHeight()
    });
    layer.add(rect);

    var redLine = new Kinetic.Line({
        points: [100, 100, 200, 200],
        stroke: 'red',
        strokeWidth: 20,
        id : "myline"
    });

    layer.add(redLine);
    stage.add(layer);

    stage.on("mousemove", function(evt) {  // also can be rect.on("click"     
        var shape = stage.get('#myline')[0];
        shape.transitionTo({
            x: evt.x-100,  // why x is pos[0].x greater?
            y: evt.y-100,  // why y is pos[0].y greater?
            duration: 1,
            easing: 'elastic-ease-out'
        });
    });