PixiJS Graphics texture tiling with large coordinates

by ShukantPal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.1.0-rc.2/browser/pixi.min.js"></script>
<button id="update-style">Update texture</button>
<span id="msg"></span>
<canvas id="view" />

JavaScript

// Empty caches

const TEXTURE_URL = 'https://i.ibb.co/tBJM09f/tan.png';

const renderer = new PIXI.Renderer({
	backgroundColor: 0xffffff,
	view: document.getElementById('view'),
});
const stage = new PIXI.Container();

const texture = PIXI.Texture.from(TEXTURE_URL);
const sample = new PIXI.Sprite(texture);

const offset = 7000;
const tiling = new PIXI.Graphics()
  .clear()
  .beginTextureFill({ texture })
  .drawRect(offset, offset, 128, 128)
  .endFill();

tiling.position.set(-offset + 128 + 16, -offset);  
stage.position.set(10, 10);

stage.addChild(sample);

renderer.render(stage);

// This fixes it:
// texture.baseTexture.update();

stage.addChild(tiling);

PIXI.Ticker.shared.addOnce(() => {
	renderer.render(stage);
});

// If the image isn't cached!
texture.baseTexture.on('loaded', () => {
	PIXI.Ticker.shared.addOnce(() => {
		renderer.render(stage);
	});
});

document.querySelector('button#update-style').onclick = function onUpdateStyleClick() {
	texture.baseTexture.update();
  PIXI.Ticker.shared.addOnce(() => {
    renderer.render(stage);
  });
}