JSFiddle - React, Tailwind, and code Playground

by UlyssesZhan

HTML

<script src="https://pixijs.download/v7.4.2/pixi.js"></script>

JavaScript

const width = 128;
const height = 128;
function show(app, texture) {
  app.stage.addChild(new PIXI.Sprite(texture));
  app.renderer.render(app.stage);
  document.body.appendChild(app.view);
}
function getTexture(app, displayObject) {
  return app.renderer.generateTexture(displayObject, {region: new PIXI.Rectangle(0, 0, width, height)});
}

const app1 = new PIXI.Application({width, height});
const app2 = new PIXI.Application({width, height});
const displayObject = new PIXI.Text('test', {fill: 0xff0000, fontSize: 32});

// With the second line commented out, only app1 shows the correct result; vice versa.
const texture = getTexture(app1, displayObject);
// const texture = getTexture(app2, displayObject);

show(app1, texture);
show(app2, texture);