fix: return valid empty bounds from empty Graphics (#11908)

fix: return valid empty bounds from empty Graphics

When a Graphics object has no drawing instructions, its bounds remain in the cleared state (minX=Infinity, minY=Infinity, maxX=-Infinity, maxY=-Infinity). When these invalid bounds are multiplied by a rotation matrix in parent bounds calculation, they produce ±Infinity results that contaminate the parent’s bounds.

This fix ensures that empty Graphics returns (0, 0, 0, 0) bounds instead of Infinity values, allowing parent containers with rotated empty Graphics children to compute bounds correctly.

Fixes: #11897

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

fix: Removes incorrect child bounds test

Removes a test case that expected empty graphics to inherit child bounds

The test was checking behavior that doesn’t align with the intended graphics bounds functionality. When a graphics object is empty, it shouldn’t automatically adopt its children’s bounds.

Co-authored-by: Claude Opus 4.6 noreply@anthropic.com Co-authored-by: Zyie 24736175+Zyie@users.noreply.github.com

PixiJS ⚡️

Next-Generation, Fastest HTML5 Creation Engine for the Web

🚀 WebGL & WebGPU Renderers
⚡️ Unmatched Performance & Speed
🎨 Easy to use, yet powerful API
📦 Asset Loader
✋ Full Mouse & Multi-touch Support
✍️ Flexible Text Rendering
📐 Versatile Primitive and SVG Drawing
🖼️ Dynamic Textures
🎭 Masking
🪄 Powerful Filters
🌈 Advanced Blend Modes

PixiJS is the fastest, most lightweight 2D library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL and WebGPU.

Setup

It’s easy to get started with PixiJS! Just use our PixiJS Create CLI and get set up in just one command:

Screenshot from terminal

npm create pixi.js@latest

or to add it to an existing project:

npm install pixi.js

Usage

import { Application, Assets, Sprite } from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#1099bb', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Load the bunny texture
    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

    // Create a bunny Sprite
    const bunny = new Sprite(texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);

    // Move the sprite to the center of the screen
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;

    app.stage.addChild(bunny);

    // Listen for animate update
    app.ticker.add((time) =>
    {
        // Just for fun, let's rotate mr rabbit a little.
        // * Delta is 1 if running at 100% performance *
        // * Creates frame-independent transformation *
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

Contribute

Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request, or you fancy owning a task from the road map above, feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

License

This content is released under the MIT License.

Change Log

Releases

Support

We’re passionate about making PixiJS the best graphics library possible. Our dedication comes from our love for the project and community. If you’d like to support our efforts, please consider contributing to our open collective.