EaselJS - Is it possible to add a BlurFilter to a line?

I'm attempting to add a blur effect to a single line using easelJS. I've been following the BlurFilter demo in the createJS docs (except that they are using a circle instead of a line). My shape disappears completely unless I remove the shape.cache call. Is this possible with a line or is blur limited to shapes?

function drawShape() {
  var shape = new createjs.Shape();
  shape.graphics.setStrokeStyle(10, "round")
  .beginStroke(colorPalette.shape[0])
  .beginFill(colorPalette.shape[0])
  .moveTo(200,400)
  .lineTo(1500,400);
  shape.cursor = "pointer";

  var blurFilter = new createjs.BlurFilter(50, 50, 1);
  shape.filters = [blurFilter];
  var bounds = blurFilter.getBounds();
  shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height); // Code works if I remove this line

  updateStage(shape); // Utility function that calls addChild and update on stage
}

<body onload="init()" onresize="resize()">
        <!-- App -->
        <canvas id="canvas"></canvas>
</body>

Solution

The issue here is that shapes have no bounds, and you are just adding the blur bounds onto the generated blur bounds. If you inspect the bounds in your fiddle, you will see that it is just returning the blur amount in either direction:

// blurFilter.getBounds()
Rectangle {x: -51, y: -51, width: 102, height: 102}

If you add these values to 50 and 100 in your cache call, it will still provide you bounds that do not include the graphics you have created. Something more accurate would be:

// Add in the offset position of the graphics and the coords of the shape
shape.cache(200 - 5 + bounds.x, 400 - 5 + bounds.y, 1300 + 10 + bounds.width, 10 + bounds.height);

Note that the -5 and +10 account for the width of the line.

Here is an updated fiddle where I have set the "bounds" on the shape itself, and then add those bounds into the cache call: http://jsfiddle.net/lannymcnie/cevymo3w/1/

Hope that provides some insight.