Paper.js两点间线条动画HTML页面无输出问题求助

尝试使用Paper.js实现两点间的线条动画，已有可运行的sketch示例，但自行编写的HTML页面无任何输出，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Extruded</title>
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Create a path to animate.
        const path  = new Path();
        path.strokeColor = 'black';
        path.add(new Point(0, 0));
        path.add(new Point(100, 50));
        
        // Initialize the time variable that will control the animation.
        let time = 0;
        
        // On each frame...
        function onFrame() {
            // ...if the animation is not finished yet...
            if (time <= 1) {
                // ...animate.
                time += 0.01;
                drawTmpPath(time);
            }
        }
        
        // Initialize the temporary path that will display our animation.
        let tmpPath;
        
        function drawTmpPath(t) {
            // Make sure that t is never over 1.
            t = Math.min(t, 1);
            // Remove the previously drawn temporary path.
            if (tmpPath) {
                tmpPath.remove();
            }
            // Draw the new temporary path from the reference one.
            tmpPath = path.clone().set({
                selected: false,
                strokeColor: 'orange',
                strokeWidth: 5
            });
            // Split it at the appropriate location.
            const remainingPath = tmpPath.splitAt(tmpPath.length * t);
            // Remove the eventual remaining part.
            if (remainingPath) {
                remainingPath.remove();
            }
        }
        
        // Scale things up.
        project.activeLayer.fitBounds(view.bounds.scale(0.8));
        
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
</body>
</html>

以下是导致页面无输出的原因及对应修正：

• Paper.js文件加载失败：代码中使用了相对路径../../dist/paper-full.js，如果本地没有对应文件，会导致Paper.js无法加载。请替换为本地正确路径，或使用Paper.js官方提供的CDN地址。
• Canvas未设置尺寸：默认Canvas元素尺寸很小，且resize并非标准HTML属性，Paper.js无法自动识别。需要给Canvas设置明确的宽高，或通过Paper.js的view监听窗口大小变化适配。
• 初始未绘制动画起点：页面加载时time为0，但未调用drawTmpPath(0)，导致初始状态无任何图形显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Extruded</title>
    <!-- 替换为本地Paper.js文件路径或官方CDN地址 -->
    <script type="text/javascript" src="paper-full.min.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Create a path to animate.
        const path  = new Path();
        path.strokeColor = 'black';
        path.add(new Point(0, 0));
        path.add(new Point(100, 50));
        
        // Initialize the time variable that will control the animation.
        let time = 0;
        
        // On each frame...
        function onFrame() {
            // ...if the animation is not finished yet...
            if (time <= 1) {
                // ...animate.
                time += 0.01;
                drawTmpPath(time);
            }
        }
        
        // Initialize the temporary path that will display our animation.
        let tmpPath;
        
        function drawTmpPath(t) {
            // Make sure that t is never over 1.
            t = Math.min(t, 1);
            // Remove the previously drawn temporary path.
            if (tmpPath) {
                tmpPath.remove();
            }
            // Draw the new temporary path from the reference one.
            tmpPath = path.clone().set({
                selected: false,
                strokeColor: 'orange',
                strokeWidth: 5
            });
            // Split it at the appropriate location.
            const remainingPath = tmpPath.splitAt(tmpPath.length * t);
            // Remove the eventual remaining part.
            if (remainingPath) {
                remainingPath.remove();
            }
        }
        
        // 初始绘制动画起点
        drawTmpPath(0);
        
        // Scale things up.
        project.activeLayer.fitBounds(view.bounds.scale(0.8));

        // 监听窗口大小变化，适配Canvas尺寸
        function onResize() {
            project.activeLayer.fitBounds(view.bounds.scale(0.8));
        }
    </script>
    <style>
        /* 设置Canvas占满窗口可用空间 */
        body { margin: 0; }
        #canvas { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

内容的提问来源于stack exchange，提问作者Mohit H