<header>
  <div id="js-canvas-wrapper" class="canvas-wrapper"></div>
</header>
body {
  position: relative;
}
.canvas-wrapper {
	position: absolute;
	overflow: hidden;
  tpo: 0;
  left: 0;
	width: 100vw;
	height: 100vh;
  
  canvas {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
}

header {
  position: relative;
  display: flex;
  height: 100vh;
  width: 100%;
  
}
View Compiled
(function(){
    window.CanvasSlideshow = function(options){
        //  SCOPE
    /// ---------------------------      
        var that  =   this;

        //  OPTIONS
        /// ---------------------------      
        options                     = options || {};
        options.stageWidth          = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920;
        options.stageHeight         = options.hasOwnProperty('stageHeight') ? options.stageHeight : 1080;
        options.pixiSprites         = options.hasOwnProperty('sprites') ? options.sprites : [];
        options.centerSprites       = options.hasOwnProperty('centerSprites') ? options.centerSprites : false;
        options.autoPlay            = options.hasOwnProperty('autoPlay') ? options.autoPlay : true;
        options.autoPlaySpeed       = options.hasOwnProperty('autoPlaySpeed') ? options.autoPlaySpeed : [10, 3];
        options.fullScreen          = options.hasOwnProperty('fullScreen') ? options.fullScreen : true;
        options.displacementImage   = options.hasOwnProperty('displacementImage') ?     options.displacementImage : '';
        options.displaceAutoFit     = options.hasOwnProperty('displaceAutoFit')  ?  options.displaceAutoFit : false; 
        options.wacky               = options.hasOwnProperty('wacky') ? options.wacky : false;
        options.interactive         = options.hasOwnProperty('interactive') ? options.interactive : false;
        options.interactionEvent    = options.hasOwnProperty('interactionEvent') ? options.interactionEvent : '';
        options.displacementCenter  = options.hasOwnProperty('displacementCenter') ? options.displacementCenter : false;
        options.dispatchPointerOver = options.hasOwnProperty('dispatchPointerOver') ? options.dispatchPointerOver : false;

        var renderer = new PIXI.autoDetectRenderer(options.stageWidth, options.stageHeight, { transparent: true });
        var stage = new PIXI.Container();
        var slidesContainer = new PIXI.Container();
        var displacementSprite = new PIXI.Sprite.fromImage( options.displacementImage );
        var displacementFilter  = new PIXI.filters.DisplacementFilter( displacementSprite );

        this.initPixi = function(){
            document.getElementById('js-canvas-wrapper').appendChild(renderer.view);

            stage.addChild(slidesContainer);
            stage.interactive = true;

            if(options.fullScreen === true){
                renderer.view.style.objectFit = 'cover';
                renderer.view.style.width     = '100%';
                renderer.view.style.height    = '100%';
                renderer.view.style.top       = '50%';
                renderer.view.style.left      = '50%';
                renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.1)';
                renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.1)';
            }else{
                renderer.view.style.maxWidth  = '100%';
                renderer.view.style.top       = '50%';
                renderer.view.style.left      = '50%';
                renderer.view.style.webkitTransform = 'translate( -50%, -50% )';
                renderer.view.style.transform = 'translate( -50%, -50% )';
            }

            displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

            // Set the filter to stage and set some default values for the animation
            stage.filters = [displacementFilter];

            if ( options.autoPlay === false ) {
                displacementFilter.scale.x = 0;
                displacementFilter.scale.y = 0;
            }

            if ( options.wacky === true ) {

                displacementSprite.anchor.set(0.5);
                displacementSprite.x = renderer.width / 2;
                displacementSprite.y = renderer.height / 2; 
            }

            displacementSprite.scale.x = 0.7;
            displacementSprite.scale.y = 0.7;

            // PIXI tries to fit the filter bounding box to the renderer so we optionally bypass
            displacementFilter.autoFit = options.displaceAutoFit;

            stage.addChild( displacementSprite );


            var texture   = new PIXI.Texture.fromImage( options.pixiSprites );
            var image     = new PIXI.Sprite( texture );

            if ( options.centerSprites === true ) {
              image.anchor.set(0.5);
              image.x = renderer.width / 2;
              image.y = renderer.height / 2;            
            }

            slidesContainer.addChild( image );
        }


        if ( options.autoPlay === true ) {

          var ticker = new PIXI.ticker.Ticker();

          ticker.autoStart = options.autoPlay;

          ticker.add(function( delta ) {

            displacementSprite.x += options.autoPlaySpeed[0] * delta;
            displacementSprite.y += options.autoPlaySpeed[1];
            renderer.render( stage );

          });

        }  else {

          var render = new PIXI.ticker.Ticker();

          render.autoStart = true;

          render.add(function( delta ) {
            renderer.render( stage );
          });        

        } 

        this.init = function() {
          that.initPixi();
        };

        /// ---------------------------
        //  START 
        /// ---------------------------           
        //this.init();
    }
})();


var initCanvasSlideshow = new CanvasSlideshow({
  sprites: 'https://raw.githubusercontent.com/Pierrinho/elephant/master/bg-novius-1920.jpg',
  displacementImage: 'https://images.pexels.com/photos/1572563/pexels-photo-1572563.jpeg',
  autoPlay: true,
  autoPlaySpeed: [0, 6],
  interactive: true,
  interactionEvent: 'click', // 'click', 'hover', 'both' 
  displaceAutoFit: false,
  dispatchPointerOver: true // restarts pointerover event after click 
});

initCanvasSlideshow.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js