EaselJS - Change Transparency of a Line

Question

I've been using CreateJS (EaselJS) for a while now, and have utilized Bitmaps as well as Rect shapes. I'm currently working with the line shape to draw a line between two points.

I want to change the transparency of the line. With a bitmap or rect shape, that would be as simple as shape.alpha = 0.5

However, this does not work for the line object. Any ideas on how to make a translucent line?

let line = new createjs.Shape(new createjs.Graphics().setStrokeStyle(8).beginStroke("#FF0000").moveTo(startingX, startingY).lineTo(endX, endY).endStroke());
line.alpha = .2

Thanks so much!

Answer 1

Other than the instructions, there is no difference between a "rect shape" and a line. Your sample code works just fine

I added start and end points but otherwise it's the same code as yours.

let line = new createjs.Shape(new createjs.Graphics().setStrokeStyle(8)
    .beginStroke("#FF0000")
  .moveTo(100, 100)
  .lineTo(200, 200)
  .endStroke());
line.alpha = .2
stage.addChild(line);

https://jsfiddle.net/2qrgL5d3/

Make sure you are updating the stage after making the alpha change.

--

Also, you can use transparent colors.

.beginStroke(createjs.Graphics.getRGB(255,0,0,0.2))

Cheers,