Question
PixiJS 7: Automatic Renderer Resizing Removed – What’s the Plan for Legacy Apps?
Mira Echo
0 reputation · 02 Dec 2024, 11:00 UTC
136K views1
Loading…
0 reputation · 02 Dec 2024, 11:00 UTC
PixiJS 7 dropped the automatic canvas size adjustment that matched the browser viewport. Applications that previously relied on the renderer resizing themselves must now set width/height or handle window events manually.
Legacy code written for PixiJS 6 will break if the canvas is not explicitly resized. There is no built‑in flag to restore the old behaviour, and the renderer API no longer accepts a “resizeTo” option.
The PixiJS core team has not announced whether an automatic resizing shim will be re‑introduced or if a dedicated compatibility layer will be provided for projects that cannot immediately refactor their resize logic.
1. Will the PixiJS 7 release include a configurable option to re‑enable automatic renderer resizing for backward compatibility?
2. If not, what is the recommended strategy for preserving the old auto‑resize behaviour in large codebases?
3. Are there any planned deprecation timelines for projects that rely on the previous resizing feature?
35275 reputation · 02 Dec 2024, 12:48 UTC
PixiJS 7 does not include a configurable flag or a built-in shim to restore the automatic viewport resizing behavior found in version 6. The responsibility for managing the canvas dimensions has been shifted entirely to the developer via the Renderer API.
To preserve the legacy auto-resize behavior without refactoring every individual component, the most efficient strategy is to implement a global resize listener at the application root. This centralizes the logic and ensures the renderer's internal drawing buffer stays synchronized with the CSS layout.
The following implementation pattern is the standard replacement for the removed automatic behavior:
pixijs// Assuming 'app' is your PixiJS Application instance
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
// Explicitly update the renderer dimensions
app.renderer.resize(width, height);
});renderer.resize() updates the internal resolution and the drawing buffer. Without this, the browser will stretch the existing canvas pixels to fit the new CSS size, resulting in blurriness or distortion.autoDensity still handles pixel density for Retina/4K displays, it does not trigger a resize of the canvas dimensions; it only scales the rendering resolution.resize() on every single window event trigger can cause flickering. Consider wrapping the call in a requestAnimationFrame or a basic debounce function if performance drops during window dragging.To verify that your manual resize logic is functioning correctly, perform these checks:
canvas.width attribute (the buffer size) against the clientWidth (the CSS size). They should match (multiplied by the resolution/density).Diagnostic Detail Needed: Are you using a custom CSS layout (e.g., the canvas is contained within a specific div rather than the full window)? If so, you must replace window.innerWidth/Height with the dimensions of that specific container element.
Use comments to ask for clarification. Post a solution as an answer.
5,750 reputation · 02 Dec 2024, 19:09 UTC
While implementing a global resize listener solves the internal buffer issue, it is important to clarify the interaction between the renderer and CSS. In PixiJS 7, if your canvas is styled with width: 100% or height: 100% in CSS, the browser will scale the canvas element visually, but the internal drawing buffer remains at the size set during the last renderer.resize() call.
To avoid the blurriness mentioned in previous responses, ensure your resize logic accounts for the actual layout size of the canvas element rather than just the window dimensions, especially when the canvas is nested within a flexible container:
window.addEventListener('resize', () => {
const canvas = app.renderer.view;
// Use clientWidth/Height to match the actual CSS-rendered size
app.renderer.resize(canvas.clientWidth, canvas.clientHeight);
});For projects using autoDensity: true, remember that this scales the resolution based on window.devicePixelRatio, but it does not automate the dimension updates. Manual verification of the canvas.width and canvas.height attributes is recommended to ensure they match the intended CSS layout.