How to isolate a WebGL shader to a specific object/shape?

[WombatTurkey]

 Here is the jsfiddle:

 

http://jsfiddle.net/Dillybob/u3mGL/13/

 

Here is where the filter is getting populated:

 

 

    background = game.add.sprite(0, 0);

    background.width = 800;

    background.height = 600;

    filter = game.add.filter('Fire', 800, 600);

    filter.alpha = 0.0;

    background.filters = [filter];

 

My line object is assigned to the variable 

drawnObject

 

So I assign that object to receive the filter object like so:

 

drawnObject.filters = [filter];

 

But my line is now a red fiery square instead of being a line with a fiery background, why?

 

If you're on Chrome, you might need to add ` --disable-web-security` to your Chrome.exe target for the filters to load.