为什么 cdn 引入的 canvas 库无效

如题，我想用 js 做一个 2048 ，要用到 canvas 库，因为我是新手，所以上手后才知道有 npm 和 cdn 两种引入库的方式，第一种还要用 webpack 打包，我就想先用 cdn 引入的方式测试一下。 结果不管怎么引用 spritejs 都无效，页面一片空白，processgingjs 也一样，用 fabricjs 画矩形倒是出现了一个框，但是没出现背景颜色。 代码都是官网上的例子或者 ai 生成我照抄的，我还把代码 cv 给 claude.ai 看了，它挑出几个无关紧要的错误，例如换 cdn 地址，方括号变花括号等等。 下面贴一个代码

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>test</title>

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

    window.SpriteJS = spritejs;

    const canvas = new SpriteJS.Canvas({

        container: document.body,

        width: 500,

        height: 500

    });

    const rect = new SpriteJS.Sprite();

    rect.attr({

        pos: [10, 10],

        size: [100, 100],

        bgcolor: 'red'

    });

    canvas.append(rect);

    canvas.render();

</script>