Change stroke color of shape - EaselJS

Question

I want to change the stroke color of a line (on click press) drawn as:

var currentLine = new createjs.Shape();
currentLine.graphics.moveTo(startX, startY).setStrokeStyle(4).beginStroke(tempLineColor).lineTo(target.x, target.y).endStroke();

I tried the "command" property of the graphics (currentLine.graphics.command) as mentioned here: http://createjs.com/docs/easeljs/classes/Graphics.html

But it didnt work because it returns "undefined". Any help would be appreciated.

Fiddle: http://jsfiddle.net/86f7gz6b/19/

Answer 1

The fiddle you provided uses an old version of CreateJS from 2013, which did not have support for Graphics commands (commands were added in version 0.8.0, released in December 2014). I have updated your fiddle with the latest (0.8.2), but note that JSFiddle also has 0.8.1 (part of CreateJS 2015.05.21), which would work as well.

The command approach is simple, just store off the last graphics.command, and modify its style value later.

shape.graphics.setStrokeStyle(4);
var cmd = shape.graphics.beginStroke("red").command; // <- note the command
shape.graphics.moveTo(0,0).lineTo(100,100);
stage.update();
// Later
cmd.style = "blue";
stage.update();

You can also chain instructions, and .command will return the last instruction command:

// Gets the beginStroke command
var cmd = shape.graphics.setStrokeStyle(4).graphics.beginStroke("red").command;

There was one thing I had to change to make your example work: The initial moveTo command has to be put after the beginStroke, as starting a stroke or fill will reset the path command, so your example wouldn't work (EaselJS must have an initial moveTo in order for a single lineTo to work.

Here is an updated fiddle: http://jsfiddle.net/lannymcnie/86f7gz6b/21/

Cheers,