JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<html>
<head>
<title>PixiJS v8.1.0 - Failure to copy from canvas into render texture</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.1.0/pixi.min.js"></script>
<canvas id="view"></canvas>
</body>
</html>

JavaScript

window.addEventListener('DOMContentLoaded', async function() {
	// Set up the application
  const app = new PIXI.Application();
  await app.init({
    autoStart: false,
    height: 300,
    view: document.getElementById('view'),
    width: 400,
  });


	// Fill a secondary canvas with RGB linear gradient
  const gradientCanvas = document.createElement('canvas');
  gradientCanvas.width = 400;
  gradientCanvas.height = 300;
  const ctx = gradientCanvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, 400, 300);
  gradient.addColorStop(0.0, '#ff0000');
  gradient.addColorStop(0.5, '#00ff00');
  gradient.addColorStop(1.0, '#0000ff');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 400, 300);
  
  // Copy gradient into a render texture
  const renderTarget = app.renderer.renderTarget.getRenderTarget(
  	new PIXI.CanvasSource({
    	resource: gradientCanvas,
    }),
  );
  const renderTexture = PIXI.RenderTexture.create({
  	width: 400,
    height: 300,
  })
  app.renderer.renderTarget.copyToTexture(
  	renderTarget,
    renderTexture,
    { x: 0, y: 0 },
    { width: 400, height: 300 },
    { x: 0, y: 0 },
  );
  renderTarget.destroy();
 
 	// Render the scene
  app.stage.addChild(new PIXI.Sprite(renderTexture));
  requestAnimationFrame(() => {
  	app.render();
  });
});