PIXI Default Blur Filter

A demonstration of the default Blur filter provided by PIXI out of the box

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

JavaScript

//Create a Pixi Application
let app = new PIXI.Application({
  width: 420,
  height: 640,
  antialias: true,
  transparent: false,
  resolution: 1
});
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

const imageUrl = "https://s3.ap-south-1.amazonaws.com/republic-invideo/dogs_1601971776471.png";

var texture = new PIXI.Texture.fromImage(imageUrl);
var sprite = new PIXI.Sprite(texture);
var filter = new PIXI.filters.BlurFilter(120, 50);
sprite.filters = [];
sprite.filters.push(filter);
app.stage.addChild(sprite);