How to create a shadow pixi.js? - pixi.js

Question

Why are there no shadow? What you need to do to make the filter work? If possible then show me in code how to create a shadow.
var renderer = PIXI.autoDetectRenderer(500, 200, {
transparent: true
});
document.getElementsByTagName('body')[0].appendChild(renderer.view);
var stage = new PIXI.Container();
function update(){
renderer.render(stage);
window.requestAnimationFrame(update);
}
update();
var graphics = new PIXI.Graphics();
graphics.beginFill(0x848484);
graphics.drawPolygon([0,0,100,0,100,100,0,100,0,0]);
graphics.endFill();
var dropShadowFilter = new PIXI.filters.DropShadowFilter();
dropShadowFilter.alpha = 1;
dropShadowFilter.blur = 2;
dropShadowFilter.distance = 20;
graphics.filters = [dropShadowFilter];
stage.addChild(graphics);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>

Answer 1

Don't make the renderer transparent. I guess, if the renderer is transparent, then it's texture has alpha = 0 and the shadow is drawn on that. Also, only works for webGL.
var renderer = new PIXI.WebGLRenderer(500, 200);
renderer.backgroundColor = 0xffffff;
document.getElementsByTagName('body')[0].appendChild(renderer.view);
var stage = new PIXI.Container();
function update(){
renderer.render(stage);
window.requestAnimationFrame(update);
}
update();
var graphics = new PIXI.Graphics();
graphics.beginFill(0x8484cc);
graphics.drawPolygon([20,20,120,20,120,120,20,120,20,20]);
graphics.endFill();
var dropShadowFilter = new PIXI.filters.DropShadowFilter();
dropShadowFilter.color = 0x000020;
dropShadowFilter.alpha = 0.2;
dropShadowFilter.blur = 6;
dropShadowFilter.distance = 20;
graphics.filters = [dropShadowFilter];
stage.addChild(graphics);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>