使用Pixi.js v8创建应用时出现Cannot read properties of undefined (reading 'canvas')错误

这个错误的核心原因是Pixi.js 8对Application的初始化逻辑做了变更——旧版本（如v7及之前）的Application会自动完成初始化，但v8中需要手动触发初始化流程，直接访问app.view时，应用还未完成初始化，导致app.view未被创建，进而触发读取canvas属性的错误。

解决方案 #

方案1：手动调用init()并等待初始化完成

通过异步方式等待应用初始化完毕后，再操作app.view：

let app;
window.onload = async function() {
    app = new PIXI.Application({
        width: 800,
        height: 600,
        backgroundColor: 0xAAAAAA
    });
    // 等待应用初始化完成
    await app.init();
    document.body.appendChild(app.view);
};

方案2：开启自动初始化

在构造选项中添加autoStart: true，让应用自动完成初始化，同时监听init事件确保app.view已生成：

let app;
window.onload = function() {
    app = new PIXI.Application({
        width: 800,
        height: 600,
        backgroundColor: 0xAAAAAA,
        autoStart: true
    });
    // 监听初始化完成事件后再添加canvas到页面
    app.on('init', () => {
        document.body.appendChild(app.view);
    });
};

额外排查点 #

• 检查js/pixi.min.js的路径是否正确：打开浏览器控制台的Network面板，确认该文件是否以200状态码成功加载。如果路径错误，PIXI对象未定义，会导致Application初始化失败，同样触发类似错误。
• 检测浏览器WebGL支持：在控制台执行PIXI.utils.isWebGLSupported()，如果返回false，说明当前环境不支持WebGL，Pixi.js无法创建渲染器，导致app.view无法生成。

内容的提问来源于stack exchange，提问作者Sereen Taleb