PIXI Canvas Zoom

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

by Muhammad Adnan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.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;
graphics.click = function (){
  grow();
  console.log("I WAS CLICKED");
}

stage.addChild(graphics);

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

function grow() {
	// ZOOM FUNCTIONALITY GOES HERE
  // WHAT I HAVE TRIED SO FAR BUT NO LUCK
  
  stage.scale.x += 1;
  stage.scale.y += 1;
  var newSize = graphics.getBounds();
  var x = newSize.width/2;
  var y = newSize.height/2;
  graphics.x = newSize.x;
  graphics.y = newSize.y;
  stage.position.x = newSize.x;
  stage.position.y = newSize.y;
  stage.pivot.set(newSize.x + x, newSize.y + y);
}

animate();