JSFiddle - React, Tailwind, and code Playground

by mathew11

HTML

<script src="https://cdn.rawgit.com/pixijs/pixi.js/v3.0.10/bin/pixi.js"></script>

JavaScript

var width = 400;
var height = 400;
var renderer = PIXI.autoDetectRenderer(width, height, {
  backgroundColor: 0x1099bb
});
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();
//gameStage
var stage2 = new PIXI.Container();
var g = new PIXI.Graphics();
g.drawRect(0, 0, 400, 400);
stage2.addChild(g);
stage.addChild(stage2);

// group1 container
var group1 = new PIXI.Container();
group1.position.x = 100;
group1.position.y = 100;
stage2.addChild(group1);
var group1_item1 = new PIXI.Graphics();
group1_item1.position.x = 20;
group1_item1.position.y = 20;
group1_item1.lineStyle(1, 0xFF0000, 1);
group1_item1.drawRect(0, 0, 60, 60);
group1.addChild(group1_item1);

// start animating
resize();
animate();

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

function resize() {
  // Determine which screen dimension is most constrained
  var ratio = Math.min(window.innerWidth / width,
    window.innerHeight / height);

  // Scale the view appropriately to fill that dimension
  stage.scale.x = stage.scale.y = ratio;

  // Update the renderer dimensions
  renderer.resize(Math.ceil(width * ratio),
    Math.ceil(height * ratio));

  console.log("Stage1 width/height:");
  console.log(stage.width + " " + stage.height);

  console.log("Stage2 width/height:");
  console.log(stage2.width + " " + stage2.height);

  console.log("Group1 width/height:");
  console.log(group1.width + " " + group1.height);

  // get the global Coords of group1_item1 relative to stage2
  console.log(group1_item1.parent.toGlobal(group1_item1));
  // it should be 120,120
  // but in v4 it's always based on the root stage.
}

window.addEventListener("resize", function() {
  resize();
});