PixiJS 8 Graphics Bug
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>
</body>
</html>
TypeScript
async function main() {
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 graphics = new PIXI.Graphics();
graphics
.moveTo(0, 0)
.lineTo(50, 0)
.lineTo(50, 50)
.lineTo(0, 50);
graphics.closePath();
graphics.lineTo(100, 100); // <-- This triggers a crash!
graphics.fill({ color: 0xff });
app.stage.addChild(graphics);
PIXI.Ticker.shared.addOnce(app.render.bind(app));
}
main();