JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pixi.min.js"></script>
<div id="canvasholder">

</div>

JavaScript

const app = new PIXI.Application({
      width: 600,
      height: 300,
      autoDensity: true,
      antialias: true,
      resolution: 1,
      backgroundColor: 0x666666,
    });
    
document.getElementById('canvasholder').appendChild(app.view);

const c1 = new PIXI.Container();
app.stage.addChild(c1);
const c2 = new PIXI.Container();
app.stage.addChild(c2);

const e1 = new PIXI.Graphics();
e1.beginFill(0xff0000);
e1.drawEllipse(0,0, 100, 50);
e1.endFill();
c1.addChild(e1);

const e2 = new PIXI.Graphics();
e2.beginFill(0xff0000);
e2.drawEllipse(0,0, 100, 50);
e2.endFill();
c2.addChild(e2);

c1.position.set(150, 150);
c2.position.set( 450, 150);
c2.angle = 45;

const b1 = c1.getBounds();
const b2 = c2.getBounds();

const r1 = new PIXI.Graphics();
r1.lineStyle({ color: 0x0000ff, alignment: 0, width: 1 })
r1.drawRect(b1.x, b1.y, b1.width, b1.height);
app.stage.addChild(r1);

const r2 = new PIXI.Graphics();
r2.lineStyle({ color: 0x0000ff, alignment: 0, width: 1 })
r2.drawRect(b2.x, b2.y, b2.width, b2.height);
app.stage.addChild(r2);

const innerBounds = new PIXI.Graphics();
innerBounds.lineStyle({ color: 0x0000ff, alignment: 0, width: 1 });
innerBounds.drawRect(-b1.width / 2, -b1.height / 2, b1.width, b1.height);
innerBounds.position.set(b2.x + b2.width / 2, b2.y + b2.height / 2);
innerBounds.angle = c2.angle;
app.stage.addChild(innerBounds);