Canvas KineticJS - re-draw something when click button

Question

I using kineticjs library. I created a line like this ( http://jsfiddle.net/zP364/ )

var redLine = new Kinetic.Line({
    points: [973, 570, 340, 423, 450, 60, 500, 20],
    stroke: 'red',
    strokeWidth: 15,
    lineCap: 'round',
    lineJoin: 'round',
    draggable: true
}); 

when i click a change button i want line has to change like this. thanks

document.getElementById('change').addEventListener('click', function() {
        redLine.point = [600, 400, 300, 100, 700, 80, 200, 30]; // i want re-draw line 
        redLine.stroke = 'blue'; // and change color
        layer.draw();
}, false);

Answer 1

Not redLine.point...Use redLine.setPoints(newPointsArray)

redLine.setPoints([600, 400, 300, 100, 700, 80, 200, 30]);

Check here for some good KineticJS tutorials: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

And check here for the KineticJS documentation: http://kineticjs.com/docs/symbols/Kinetic.Line.php#setPoints