KineticJS Uncaught TypeError: невозможно прочитать свойство «x» неопределенного после обновления

Я использовал этот учебник для создания перетаскиваемых полигонов. Учебник

Теперь я хочу добавить в него Text и попытался обновиться с kinetic-v3.10.0.js на более новый. Но после обновления я всегда получаю указанное сообщение об ошибке.

Может кто-нибудь взглянуть на мой код и помочь мне, что мне нужно изменить, чтобы он снова работал?

Вот части моего кода:

Построить якорь

function buildAnchor(layer, x, y, name) {
var anchor = new Kinetic.Circle({
    x: x,
    y: y,
    radius: 12,
    stroke: 'red',
    fill: '#ddd',
    strokeWidth: 4,
    draggable: true,
    name : name
});

// add hover styling
anchor.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
    this.setStrokeWidth(6);
    layer.draw();
});
anchor.on('mouseout', function() {
    document.body.style.cursor = 'default';
    this.setStrokeWidth(4);
    layer.draw();
});

layer.add(anchor);
return anchor;}

Строительная линия:

function buildLine(layer, x1, y1, x2, y2, name) {
var line = new Kinetic.Line({
    points: [x1, y1, x2, y2],
    stroke : '#000',
    strokeWidth : 2,
    name : name
});

var xDiff = x1 - x2;
var yDiff = y1 - y2;

var text = new Kinetic.Text({
    x: 0,
    y: 0,
    text: 'Test',
    fontSize: 20,
    fontFamily: 'Calibri',
    fill: 'green'
});


if (xDiff < 0 && yDiff == 0) {
    line.move(0,-30); //Point a -> b
}
else if (xDiff == 0 && yDiff < 0) {
    line.move(30,0); //Point b -> c
}
else if (xDiff > 0 && yDiff == 0) {
    line.move(0,30); //Point c -> d
}
else if (xDiff == 0 && yDiff > 0) {
    line.move(-30,0); //Point d -> a
}
else if (xDiff < 0 && yDiff < 0) {
    line.move(0,-30);       
}
else if (xDiff < 0 && yDiff > 0) {
    line.move(0,-30);
}
else if (xDiff > 0 && yDiff > 0) {
    line.move(-5,30);
}

layer.add(text);
layer.add(line);
return line;
return text;}

Построить треугольник:

function buildTriangle(layer, points, name) {
var triangle = new Kinetic.Polygon({
    stroke : '#666',
    strokeWidth : 8,
    name : name
});

triangle.scaleAnchor = function(anchor, factor) {
    anchor.attrs.x = ( anchor.attrs.x - this.center.x ) * factor + this.center.x;
    anchor.attrs.y = ( anchor.attrs.y - this.center.y ) * factor + this.center.y;
};
triangle.calculateCenter = function() {
    this.center.x = ( this.a.attrs.x + this.b.attrs.x + this.c.attrs.x ) / 3;
    this.center.y = ( this.a.attrs.y + this.b.attrs.y + this.c.attrs.y ) / 3;
};

triangle.a = buildAnchor(layer, points[0], points[1], 'anchor');
triangle.b = buildAnchor(layer, points[2], points[3], 'anchor');
triangle.c = buildAnchor(layer, points[4], points[5], 'anchor');
line1 = buildLine(layer, points[0], points[1], points[2], points[3], 'line');
line2 = buildLine(layer, points[2], points[3], points[4], points[5], 'line');
line3 = buildLine(layer, points[4], points[5], points[0], points[1], 'line');
triangle.was = { x : 0, y : 0 };
triangle.center = { x : 0, y : 0 };

layer.add(triangle);
return triangle;}

Нарисуйте треугольник:

function drawtriangle() {
var triangle = this.get('.triangle')[0];

triangle.setPoints([    triangle.a.attrs.x - triangle.was.x, 
                        triangle.a.attrs.y - triangle.was.y,
                        triangle.b.attrs.x - triangle.was.x,
                        triangle.b.attrs.y - triangle.was.y,
                        triangle.c.attrs.x - triangle.was.x,
                        triangle.c.attrs.y - triangle.was.y ]);
line1.setPoints([triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y, triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y]);
line2.setPoints([triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y, triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y]);
line3.setPoints([triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y, triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y]);

triangle.calculateCenter.apply(triangle);}