PIXI Canvas Zoom

A Pixi Canvas which can zoom in on an element to the point it takes the whole container's size

HTML

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

JavaScript

var display = document.createElement("div");
display.setAttribute("id", "display");

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {
            transparent: true,
            anitalias: true
        });
        
document.getElementsByTagName('body')[0].appendChild(renderer.view);
renderer.view.style.border = "1px dashed black";

var stage = new PIXI.Container();

//Creating the element to zoom
graphics = new PIXI.Graphics();
graphics.beginFill(0x2F7455);
graphics.drawRect(100, 100, 75, 50);
graphics.endFill();
graphics.interactive = true;

//next time set position, not the rect offset.
//graphics.position.set(100, 100);


graphics.click = function (){
  grow();
  console.log("I WAS CLICKED");
}

stage.addChild(graphics);

function animate() {
	requestAnimationFrame(animate);
  renderer.render(stage);
}

function grow() {
	//lets take original graphics size
  var oldSize = graphics.getLocalBounds();
    
  //adjust lets see
  stage.scale.set(renderer.screen.width / oldSize.width,
  		renderer.screen.height / oldSize.height);
     
  // now, our left-top corner which is (0,0) must be mapped to graphics left-top which is graphics.position
  
  //first thing is rect offset, second is graphics position
  stage.pivot.set(oldSize.x + graphics.position.x, oldSize.y + graphics.position.y);
}

animate();