JSFiddle - React, Tailwind, and code Playground

by Amadeus Demarzi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.0/pixi.js"></script>
<canvas id="canvas"></canvas>

CSS

canvas {
	width:446px;
	height:500px;
}

JavaScript

var stage, renderer, sprite, render, mirror, sprite2;

PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

stage = new PIXI.Stage(0x000000);

renderer = new PIXI.WebGLRenderer(
	446,
	500,
	{
		view: document.getElementById('canvas'),
		resolution: 2
	}
);

sprite = new PIXI.Sprite(PIXI.Texture.fromImage('http://fun.amadeusamade.us/fog-test/bg.png'));


// Change the resolution argument set at 2 to a 1,
// and re-run to see the expected result
mirror = new PIXI.RenderTexture(446, 250, renderer, PIXI.scaleModes.LINEAR, 2);


mirror.render(sprite);

sprite2 = new PIXI.Sprite(mirror)
sprite2.position.y = 501;
sprite2.scale.y = -1;

stage.addChild(sprite);
stage.addChild(sprite2);

render = function(){
	mirror.render(sprite);
    renderer.render(stage);
    window.requestAnimationFrame(render);
};

render();