JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.2.2/pixi.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PixiJS Template</title>
<style>
    body { margin: 0; }
</style>
</head>
<body>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <p>
    Primary canvas:
    </p>
    <canvas id="canvas"></canvas>
    <p>
    Secondary canvas:
    </p>
</body>
</html>

TypeScript

const IMAGE_URL = 'https://fastly.picsum.photos/id/1022/50/50.jpg?hmac=2UXIztHffnefxwpqrEfc4PyuyxYYoVTAn-bsutS__b4';

async function main() {
	await PIXI.Assets.load(IMAGE_URL);
 
  const app = new PIXI.Application();

  await app.init({
    autoStart: true,
    autoDensity: true,
    background: 0xffffff,
		height: 100,
    resolution: devicePixelRatio,
    width: 100,
		view: document.getElementById('canvas'),
  });
  const texture = PIXI.Texture.from(IMAGE_URL);
  
  const secondaryCanvas = document.createElement('canvas');
	secondaryCanvas.width = 50;
  secondaryCanvas.height = 100;// <- Change me back to 50 to fix the underlying issue!
	const secondaryContext = secondaryCanvas.getContext('2d');
  const frame = new PIXI.Rectangle(0, secondaryCanvas.height - 50, 50, 50);
  secondaryContext.drawImage(texture.source.resource, frame.x, frame.y, frame.width, frame.height);
  
  const secondaryTexture = new PIXI.Texture({
  	source: new PIXI.CanvasSource({
    	resource: secondaryCanvas,
    }),
    frame,
  });
  document.body.appendChild(secondaryCanvas);
  secondaryTexture.source.update();

  const graphics = app.stage.addChild(new PIXI.Graphics())
    .rect(0, 0, 50, 50)
    .fill({
      texture: secondaryTexture,
    });
    
  Object.assign(window, {
  	app,
    graphics,
    texture,
  });
}

main();